How to use ModalBox on an area map

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>
Subscribe for our monthly newsletter for updated articles and useful code scripts.

Share It

comments powered by Disqus
Chat With Us Close
Leave Message