Jump to content

Image popup on map area


Windigo
 Share

Recommended Posts

Hi, it's the firts time ever that I start a thread on a forum. I usually find answers browsing around on the net. But now I really don't find any clear solution to a problem that seam simple to me in the beginning. So I turn to experts.
Here's the thing:I made a web site for a camping ground and on the map page I want images to pop up when the mouse hover over site numbers. Found a way using simply html and css and making "hot spots" with areas on the map.It work great doing exactly what expected. But it only works in Google Chrome.
Is there a simple workaround for this or do I have to use javascript/jQuery and if so how to implement it? Here is the page:http://www.campingvillette.com/plan.html
Thanx in advance for your answers!
Link to comment
Share on other sites

That is not exactly how image map works, and usually requires JavaScript to swap images, You could use the anchors with images as you have it now using position: absolute; without image map, but you have 177 validation errors https://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.campingvillette.com%2Fplan.html, which makes it difficult to come up with workable solution until these are sorted out.

Link to comment
Share on other sites

Map tag can only have child area tags and nothing else, you are using HTML5 doctype spec of using anchor around block elements and custom data- attributes within doctype of transitional XHTML which it does not recognise or support, this is probably why you have browser support issue, you need to ideally to move to HTML5 doctype.

 

Image map uses JavaScript 'onmouseover' and 'onmouseout' (as shown in link) to swap main image to another image of same size, that relates to the area of map hovered over, it does not support insertion of anchor and img tag within it, you are lucky you got it to work in IE and Chrome, but! it is invalid and wrong, and probably why other browser will not show the same results.

 

You can achieve same effect using positioning of anchor tag and span separately for exxample.

<!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" />        <title>Untitled Document</title>        <script type="text/javascript">            /*<![CDATA[*//*---->*/            /*--*//*]]>*/        </script>        <style type="text/css">            h1 {                color: #165355;                font-size: 36px;                font-weight: bold;                margin: 0;                padding-top: 25px;                text-align: center;            }            h2 {                color: #165355;                font-family: "Trebuchet MS",Arial,Helvetica,sans-serif;                font-size: 26px;                font-weight: normal;                margin: 0;                padding-top: 0;                text-align: left;            }            #legende {                color: #ff9;                font-family: "Trebuchet MS",Arial,Helvetica,sans-serif;                font-size: 24px;                height: auto;                margin: 15px 0 0 40px;                width: 300px;            }            #legende p {                margin-bottom: 7px;                margin-top: 0;            }            .legende_icones {                margin-right: 5px;                vertical-align: sub;            }            .photoChaletYourte {                border: 5px solid #b4d71b;                margin-left: 150px;                margin-top: 15px;            }            #plan_container {                float: right;                position: relative;            }            #plan {                margin-right: -30px;                margin-top: 25px;                position: relative;            }            #page_container_plan {                background-image: url("http://www.campingvillette.com/images/back_page_plan.jpg");            }            #page_container_acc, #page_container_tar, #page_container_att, #page_container_plan, #page_container_cont {                background-position: center top;                background-repeat: no-repeat;                border-width: 0;                height: 1125px;                margin: 4px auto auto;                width: 1100px;                z-index: -3;            }            #texte_acc, #texte_tar, #texte_att, #texte_plan, #texte_cont {                color: #522018;                padding-left: 120px;                padding-right: 90px;                text-align: left;                text-indent: 25px;                width: 950px;            }            .thumbnail span {                background-color: lightyellow;                border: 1px dashed gray;                color: black;                left: -1000px;                padding: 5px;                position: absolute;                text-decoration: none;                visibility: hidden;            }            .thumbnail_up span {                background-color: lightyellow;                border: 1px dashed gray;                color: black;                left: -1000px;                padding: 5px;                position: absolute;                text-decoration: none;                visibility: hidden;            }            .thumbnail:hover span, .thumbnail_up:hover span    {visibility: visible; left: auto;}            #plan > div a + span, #plan > div a {position: absolute;}            /* area positions */            #area2 {                left: 80.8%;                top: 50.6%;            }            #area3 {                left: 47.8%;                top: 31.6%;            }            #area5 {                left: 64.8%;                top: 28.6%;            }            #area6 {                left: 40.8%;                top: 24%;            }            #area7 {                left: 77.9%;                top: 18.2%;            }            #area8 {                left: 77.8%;                top: 13.6%;            }            #area9 {                left: 78.8%;                top: 9.3%;            }            #area11 {                left: 38%;                top: 1%;            }            #area12 {                height: 43px;                left: 30.8%;                top: 18.6%;                width: 43px;            }            #area14 {                left: 7.7%;                top: 26.7%;            }            #area16 {                left: 21.2%;                top: 57.78%;            }            #area17 {                left: 40.2%;                top: 37.3992%;            }            #area19 {                left: 52.2%;                top: 48.35%;            }            #area20 {                left: 75.9863%;                top: 63.5%;            }            #area21 {                left: 58.4%;                top: 40.6%;            }            #area22 {                height: 40px;                left: 62.8%;                top: 39.6%;            }            #area23 {                left: 83.8%;                top: 94.5%;            }            #area24 {                height: 114px;                left: 81.99%;                top: 77.6%;                width: 60px;            }            #area25 {                height: 57px;                left: 82%;                top: 70.2%;                width: 32px;            }            #area26 {                height: 72px;                left: 74%;                top: 55.6%;                width: 65px;            }            #area27 {                left: 78.8%;                top: 47.6%;            }            #area28 {                height: 59px;                left: 66.4%;                top: 47.4%;                width: 35px;            }            .circle{                background-color: lime;                border-radius: 20px;                height: 24px;                opacity: 0.5;                width: 24px;            }            .circle_triangle {                background-color: red;  /*  */                border-radius: 20px;                height: 30px;                width: 30px;                opacity: 0.5;            }            .arrow-up {                width: 0;                height: 0;                border-bottom: 23px solid red;                border-left: 13px solid transparent;                border-right: 13px solid transparent;                opacity: 0.5;            }            .square {                width: 25px;                height: 25px;                background-color: blue;                opacity: 0.5;            }            /*  #plan > div a + span { position: absolute !important; top: 10% !important; left: 5% !important;}               #plan > div .thumbnail_up + span, #plan > div .thumbnail + span*/            #plan > div a + span{                background-color: lightyellow;                border: 1px dashed gray;                color: black;                padding: 5px;                text-decoration: none;                visibility: hidden;                top: 10% !important;                left: -78% !important;            }            #plan > div .thumbnail_up:hover + span, #plan > div .thumbnail:hover + span {visibility: visible;}        </style>    </head>    <body>        <div id="page_container_plan">            <div id="texte_plan">                <div id="plan_container">                    <div id="plan"><img width="558" height="928" border="0" usemap="#plan" alt="Plan" src="http://www.campingvillette.com/images/plan.png" />                        <!--Section des images PopUp du plan-->                        <div> <!-- div de la map -->                            <!-- <a class="thumbnail" href="#thumb"></a> <span><img alt="" src="http://www.campingvillette.com/images/plan/1.jpg" /><br />Site no.1</span>-->                            <a id="area2" href="#thumb" class="thumbnail circle_triangle"></a>                            <span><img alt="" src="http://www.campingvillette.com/images/plan/2.jpg" /><br />Site no.2</span>                            <a id="area3" href="#thumb" class="thumbnail circle_triangle"></a>                            <span><img alt="" src="http://www.campingvillette.com/images/plan/3.jpg" /><br />Site no.3</span>                            <a id="area5" href="#thumb" class="thumbnail_up square"></a>                            <span><img alt="" src="http://www.campingvillette.com/images/plan/5.jpg" /><br />Site no.5</span>                            <a id="area6" href="#thumb" class="thumbnail_up square"></a>                            <span><img alt="" src="http://www.campingvillette.com/images/plan/6.jpg" /><br />Site no.6</span>                            <a id="area7" href="#thumb" class="thumbnail_up square"></a>                            <span><img alt="" src="http://www.campingvillette.com/images/plan/7.jpg" /><br />Site no.7</span>                            <a id="area8" href="#thumb" class="thumbnail_up circle_triangle"></a>                            <span><img alt="" src="http://www.campingvillette.com/images/plan/8.jpg" /><br />Site no.8</span>                            <a id="area9" href="#thumb" class="thumbnail_up square"></a>                            <span><img alt="" src="http://www.campingvillette.com/images/plan/9.jpg" /><br />Site no.9</span>                            <a id="area11" href="#thumb" class="thumbnail_up circle_triangle"></a>                            <span><img alt="" src="http://www.campingvillette.com/images/plan/11.jpg" /><br />Site no.11</span>                            <a id="area12" href="#thumb" class="thumbnail_up square"></a>                            <span><img alt="" src="http://www.campingvillette.com/images/plan/chalet.jpg" /><br />Chalet sur le site no.12</span>                            <!-- <a class="thumbnail" href="#thumb"><span><img alt="" src="http://www.campingvillette.com/images/plan/13.jpg" /><br />Site no.13</span></a> -->                            <a id="area14" href="#thumb" class="thumbnail_up circle"></a>                            <span><img alt="" src="http://www.campingvillette.com/images/plan/14.jpg" /><br />Site no.14</span>                            <a id="area16" href="#thumb" class="thumbnail circle"></a>                            <span><img alt="" src="http://www.campingvillette.com/images/plan/16.jpg" /><br />Site no.16</span>                            <a  id="area17" href="#thumb" class="thumbnail circle"></a>                            <span><img alt="" src="http://www.campingvillette.com/images/plan/17.jpg" /><br />Site no.17</span>                            <!--<a class="thumbnail" href="#thumb"></a> <span><img alt="" src="http://www.campingvillette.com/images/plan/18.jpg" /><br />Site no.18</span>-->                            <a id="area19" href="#thumb" class="thumbnail circle"></a>                            <span><img alt="" src="http://www.campingvillette.com/images/plan/19.jpg" /><br />Site no.19</span>                            <a id="area20"  href="#thumb" class="thumbnail circle"></a>                            <span><img alt="" src="http://www.campingvillette.com/images/plan/20.jpg" /><br />Site no.20</span>                            <a id="area21" href="#thumb" class="thumbnail square"></a>                            <span><img alt="" src="http://www.campingvillette.com/images/plan/vidange.jpg" /><br />Station de vidange</span>                            <a  id="area22" href="#thumb" class="thumbnail square"></a>                            <span><img alt="" src="http://www.campingvillette.com/images/plan/yourte.jpg" /><br />Yourte sur le site no.4</span>                            <a  id="area23" href="#thumb" class="thumbnail square"></a>                            <span><img alt="" src="http://www.campingvillette.com/images/plan/accueil.jpg" /><br />L'Accueil</span>                            <a id="area24"  href="#thumb" class="thumbnail square"></a>                            <span><img alt="" src="http://www.campingvillette.com/images/plan/fermette.jpg" /><br />La mini-ferme</span>                            <a id="area25"  href="#thumb" class="thumbnail square"></a>                            <span><img alt="" src="http://www.campingvillette.com/images/plan/jeux.jpg" /><br />Les jeux</span>                            <a id="area26"  href="#thumb" class="thumbnail square"></a>                            <span><img alt="" src="http://www.campingvillette.com/images/plan/lac.jpg" /><br />Le lac</span>                            <a id="area27"  href="#thumb" class="thumbnail square"></a>                            <span><img alt="" src="http://www.campingvillette.com/images/plan/poubelles.jpg" /><br />Recyclages/compostage/déchets</span>                            <a id="area28"  href="#thumb" class="thumbnail square"></a>                            <span><img alt="" src="http://www.campingvillette.com/images/plan/toilette_douche.jpg" /><br />Bloc sanitaire</span>                            <!--  <map id="plan2" name="plan">                             <area shape="circle" coords="418,660,15" alt="Site no.1" />                               <area alt="Site no.2" href="#" coords="461,485,11" shape="circle" />                               <area alt="Site no.3" href="#" coords="268,311,12" shape="circle" />                               <area alt="Site no.5" href="#" coords="353,266,378,292" shape="rect" />                               <area alt="Site no.6" href="#" coords="212,222,238,250" shape="rect" />                               <area alt="Site no.7" href="#" coords="431,170,455,195" shape="rect" />                               <area alt="Site no.8" href="#" coords="445,142,12" shape="circle" />                               <area alt="Site no.9" href="#" coords="434,88,460,115" shape="rect" />                               <area alt="Site no.11" href="#" coords="212,27,14" shape="circle" />                               <area alt="Chalet" href="#" coords="161,172,187,215" shape="rect" />-->                            <!--<area shape="circle" coords="140,259,13" href="#" alt="Site no.13" />                            <area alt="Site no.14" href="#" coords="32,260,13" shape="circle" />                            <area alt="Site no.16" href="#" coords="109,549,12" shape="circle" />                            <area alt="Site no.17" href="#" coords="221,359,13" shape="circle" />-->                            <!--  <area shape="circle" coords="220,516,14" href="#" alt="Site no.18" />                            <area alt="Site no.19" href="#" coords="290,461,13" shape="circle" />                            <area alt="Site no.20" href="#" coords="428,603,13" shape="circle" />                            <area alt="Station de vidange" href="#" coords="312,377,339,406" shape="rect" />                            <area alt="Yourte" href="#" coords="341,369,365,409" shape="rect" />                            <area alt="Accueil" href="#" coords="461,875,489,903" shape="rect" />                            <area alt="Fermette" href="#" coords="457,722,512,836" shape="rect" />                            <area alt="Jeux" href="#" coords="455,653,484,708" shape="rect" />                            <area alt="Lac" href="#" coords="412,520,469,580" shape="rect" />                            <area alt="Poubelles" href="#" coords="432,443,460,468" shape="rect" />                            <area alt="Bloc sanitaire" href="#" coords="360,439,398,499" shape="rect" />                        </map>-->                        </div>                        <!--Fin section des images PopUp du plan-->                    </div>                </div>                <h1 style="margin-right:300px;">Plan du Camping</h1>                <p> </p>                <h2>Légende</h2>                <div id="legende">                    <p><img alt="" width="28" height="27" class="legende_icones" src="http://www.campingvillette.com/images/legende/carre_rouge.png" />                        3 Services</p>                    <p><img alt="" width="27" height="26" class="legende_icones" src="http://www.campingvillette.com/images/legende/triangle_vert.png" /> 2 Services</p>                    <p><img alt="" width="25" height="26" class="legende_icones" src="http://www.campingvillette.com/images/legende/cercle_bleu.png" /> 0 Service</p>                    <p><img alt="" width="27" height="27" class="legende_icones" src="http://www.campingvillette.com/images/legende/carre_violet.png" /> Jeux</p>                    <p><img alt="" width="29" height="29" class="legende_icones" src="http://www.campingvillette.com/images/legende/carre_bleu.png" /> Lac</p>                    <p><img alt="" width="29" height="28" class="legende_icones" src="http://www.campingvillette.com/images/legende/carre_marron.png" /> Bloc sanitaire</p>                    <p><img alt="" width="29" height="28" class="legende_icones" src="http://www.campingvillette.com/images/legende/carre_orange.png" /> Poubelles</p>                    <p><img alt="" width="28" height="28" class="legende_icones" src="http://www.campingvillette.com/images/legende/carre_brun.png" /> Fermette</p>                    <p><img alt="" width="29" height="28" class="legende_icones" src="http://www.campingvillette.com/images/legende/carre_vin.png" /> Chalet location <br />                        <span style="font-size: 18px; margin-left: 140px;">(4 personnes)</span></p>                    <p><img alt="" width="29" height="29" class="legende_icones" src="http://www.campingvillette.com/images/legende/carre_noir.png" /> Accueil</p>                    <p><img alt="" width="30" height="29" class="legende_icones" src="http://www.campingvillette.com/images/legende/carre_jaune.png" /> Station de vidange</p>                    <p><img alt="" width="30" height="29" class="legende_icones" src="http://www.campingvillette.com/images/legende/carre_vin2.png" /> Yourte (<span style="color: #FF0000;">nouveau!</span>)                        <br />                        <span style="font-size: 18px; margin-left: 140px;">(4 personnes)</span></p>                    <!--Section Lightbox -->                    <a data-title="Salon" data-lightbox="chalet" href="images/salon.jpg">                        <img width="318" height="201" class="image_clear photoChaletYourte" alt="Chalet et yourte" src="http://www.campingvillette.com/images/chalet_page_plan.jpg" /> <div style="position:absolute; font-size:12px; color:#FFF; margin-left:150px; margin-top:-25px;">Cliquer pour d'autres photos</div></a>                    <a data-title="Cuisine" data-lightbox="chalet" href="images/cuisine.jpg"></a>                    <a data-title="Chambre" data-lightbox="chalet" href="images/chambre.jpg"></a>                    <a data-title="Autre vue du salon" data-lightbox="chalet" href="images/salon2.jpg"></a>                    <a data-title="Salle d'eau" data-lightbox="chalet" href="images/toilette.jpg"></a>                    <a data-title="La yourte" data-lightbox="yourte" href="images/yourte2.jpg">                        <img width="318" height="201" class="image_clear photoChaletYourte" alt="Yourte" src="http://www.campingvillette.com/images/yourte.jpg" /><div style="position:absolute; font-size:12px; color:#FFF; margin-left:150px; margin-top:-25px;">Cliquer pour d'autres photos</div></a>                    <a data-title="Lit double" data-lightbox="yourte" href="images/lit_yourte.jpg"></a>                    <a data-title="Zone fringale" data-lightbox="yourte" href="images/table_yourte.jpg"></a>                    <a data-title="Zone détente" data-lightbox="yourte" href="images/salon_yourte.jpg"></a>                    <a data-title="Les commodités" data-lightbox="yourte" href="images/toilette_yourte.jpg"></a>                    <a data-title="Coin bureau" data-lightbox="yourte" href="images/bureau_yourte.jpg"></a>                    <a data-title="Vue du toit" data-lightbox="yourte" href="images/plafond_yourte.jpg"></a>                    <!--Fin section Lightbox -->                </div>            </div>        </div>    </body></html>
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...