Windigo Posted July 11, 2015 Share Posted July 11, 2015 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 More sharing options...
dsonesuk Posted July 11, 2015 Share Posted July 11, 2015 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 More sharing options...
Windigo Posted July 11, 2015 Author Share Posted July 11, 2015 Well, I found this method describded here: http://www.webproworld.com/webmaster-forum/threads/100871-javascript-hover-effect-with-image-map I tried it and it work in Chrome, Internet Explorer but not in Firefox for a reason. Since I'm not a programmer I don't see a way to fix it. Any help would be greatly appriciate! Link to comment Share on other sites More sharing options...
dsonesuk Posted July 11, 2015 Share Posted July 11, 2015 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 More sharing options...
Windigo Posted July 11, 2015 Author Share Posted July 11, 2015 Wow! thanx a whole bunch Dsonesuk!!! Now it works great!! Link to comment Share on other sites More sharing options...
dsonesuk Posted July 11, 2015 Share Posted July 11, 2015 GREAT! but CONVERT to html5 doctype, and validate AND correct other errors. Link to comment Share on other sites More sharing options...
Windigo Posted July 11, 2015 Author Share Posted July 11, 2015 Good, I'll see into it in the next few days... Link to comment Share on other sites More sharing options...
Windigo Posted July 12, 2015 Author Share Posted July 12, 2015 HI Dsonesuk! Happy to report that the site had been convert to HTML5 and validated with no errors. I owe a lot to you, thx again!! Link to comment Share on other sites More sharing options...
dsonesuk Posted July 13, 2015 Share Posted July 13, 2015 <a id="area2" href="#thumb" class="thumbnail circle_triangle"></a> <span style="top: 40%; left: -10%;">Would be#area2 + span {top:40%; left:-10%;} Link to comment Share on other sites More sharing options...
Windigo Posted July 13, 2015 Author Share Posted July 13, 2015 Yes, I suppose it would make a cleaner and simpler code... don't tell anybody, but I think you are a genius! Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now