• 8/11/2013
• 3647
• ModalBox

A simple example of using modalbox with area maps.

This image is divided in two part one half goes to one link and other half goes to another link. Try to click and see modal box work. I am using modal box to show area link in an iframe.

Script & HTML

<div class="demo">
    <img class="mapper iborder00aa00 icolor00ff00" src="images/remaxsolumenn.jpg"
        usemap="#remaxsolumenn" border="0" width="76" height="50" alt="" /></div>
<map name="remaxsolumenn">
    <area shape="rect" id="Gunnar" coords="0,0,40,50" href="http://remax.is/SENTER/20-Gunnar-Har&eth;arson?_=923277182">
    <area shape="rect" id="Ástþór" coords="43,0,76,50" href="http://remax.is/SENTER/1-&Aacute;st&thorn;&oacute;r-Gu&eth;mundsson?_=532148816">
</map>
<link href="http://www.rudrasofttech.com/js-tools/modal/modal.css" rel="Stylesheet" />
<link href="http://www.rudrasofttech.com/js-tools/modal/modal-darktheme.css" rel="Stylesheet" />
<!-- Include Modal Box Script File -->
<script src="http://www.rudrasofttech.com/js-tools/modal/modal.js" type="text/javascript"></script>
<!-- Script to initialize Modal Box -->
<script type="text/javascript">
    $(document).ready(function () {
        $("#Gunnar").modalbox({
            Type: 'iframe',
            Width: 800,
            Height: 600
        });
        $("#Ástþór").modalbox({
            Type: 'iframe',
            Width: 800,
            Height: 600
        });
    });
</script>

Share It

• Tweet