view webapp/src/main/webapp/jquery/test-regions.html @ 1107:365f95a14057

factor out defineArea, using overlay div
author hertzhaft
date Sat, 27 Oct 2012 00:06:29 +0200
parents a45894a81e40
children
line wrap: on
line source

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="initial-scale=1.0"/>
        <title>Digilib: Regions plugin test</title>
        <!-- <base href="http://img.biblhertz.it/" target="_blank" /> -->

        <style type="text/css">
            body {
                 background: silver;
            }
        </style>

        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript" src="jquery.cookie.js"></script>
        <script type="text/javascript" src="jquery.digilib.js"></script>
        <script type="text/javascript" src="jquery.digilib.geometry.js"></script>
        <script type="text/javascript" src="jquery.digilib.arrows.js"></script>
        <script type="text/javascript" src="jquery.range.js"></script>
        <link rel="stylesheet" type="text/css" href="jquery.range.css" />
        <script type="text/javascript" src="jquery.digilib.buttons.js"></script>
        <script type="text/javascript" src="jquery.digilib.sliders.js"></script>
        <script type="text/javascript" src="jquery.digilib.birdseye.js"></script>
        <script type="text/javascript" src="jquery.digilib.marks.js"></script>
        <script type="text/javascript" src="jquery.digilib.regions.js"></script>
        <link rel="stylesheet" type="text/css" href="jquery.digilib.css" />

        <script type="text/javascript">
            $(document).ready(function(){
                var opts = {
                    interactionMode : 'fullscreen',
                    processHtmlRegions : true,
                    showRegionNumbers : false,
                    autoZoomRegionLinks : true
                    };
                var $div = $('div#digilib');
                $div.digilib(opts);
            });

        </script>
    </head>

    <body>
        <div id="digilib">
            <p>digilib doesn't work! Please switch on Javascript or notify the server administrator!</p>
            <img src="http://digilib.berlios.de/images/digilib-logo-big.png" />
            <map class="dl-keep dl-regioncontent test1">
                <area title="A: Basilica S. Petri in Vaticano cum Porticu et P. Pontificio" coords="0.0599,0.7277,0.0371,0.0577"/>
                <area title="B: Basilica S. Joannis Lateranensis cum Palatio" coords="0.6324,0.1208,0.0337,0.0317"/>
                <area title="C: Basilica S. Mariae Maioris" coords="0.4114,0.1343,0.032,0.0345"/>
                <area title="D: Ecclesia S. Crucis in Jerusalem" coords="0.599,0.053,0.0238,0.0308"/>
                <area title="E: Ecclesia S. Andreae della Valle dicta" coords="0.4395,0.446,0.0236,0.0284"/>
                <area title="F: Ecclesia Collegii Romani Societatis Jesu" coords="0.3995,0.3625,0.0225,0.0322"/>
                <area title="G: Temp. Soc: Jesu, Vulgo Giesł" coords="0.4534,0.362,0.0269,0.0419"/>
                <area title="H: Temp. et Monas SS. Trinitatis Montium" coords="0.206,0.2397,0.0284,0.0304"/>
                <area title="I: Temp. D. Mariae Populi ab Alex. VII restau." coords="0.0523,0.3085,0.012,0.0207"/>
                <area title="K: Temp. S. Athanasii Grecorum" coords="0.1608,0.3157,0.0138,0.0238"/>
            </map>
            <map class="dl-keep dl-regioncontent test2">
                <area title="L: Temp. D. Mariae Rotundae olim Patheon Agrippae" coords="0.3874,0.4144,0.0151,0.0228"/>
                <area title="M: Tem. D. Mariae Super Minervam" coords="0.4077,0.3991,0.0115,0.0197"/>
                <area title="N: Tem. D. M. in Valicella Vulgo Chiesa Nuova" coords="0.3914,0.526,0.026,0.0318"/>
                <area title="P: Tem. S. Mariae in Ara Caeli" coords="0.5239,0.3242,0.0121,0.0166"/>
                <area title="Q: Tem. et Monas S. Andreae delle fratte" coords="0.2884,0.2788,0.0146,0.028"/>
                <area title="R: Tem. D. M. Pacis ab Alex VII denuo constructa" coords="0.3012,0.3435,0.0159,0.0124"/>
                <area title="S: Tem. et Hospitale B. Mariae de Anima nationis Germanorum et Flandrorum" coords="0.3252,0.3559,0.0145,0.0196"/>
            </map>
            <map class="dl-keep dl-regioncontent test3">
                <area title="T: Tem. et Hospitale S. Lodouici nationis Gallicanae" coords="0.3672,0.446,0.0083,0.0143"/>
                <area title="V: Tem. et Hospitale S. Iacobi nationis Hispanorum" coords="0.4037,0.463,0.0073,0.0162"/>
                <area title="X: Tem. et Hospitale S. Spiritus in Sassia" coords="0.2288,0.658,0.0386,0.0462"/>
                <a title="test a tag" coords="0.05,0.05,0.3,0.1">Testing an <b>a tag</b> with content</a>
                <a title="what's up" coords="0.35,0.35,0.2,0.1">another tag</a>
            </map>
        </div>
    </body>
</html>