Image map using z-index

**Sweet_Karren** · 03-10-2016, 04:02 PM

Code:

<html>
<body>
<map name='initialmap'>
<img id="image" src="http://i.imgur.com/SY5h8EC.png?1" width="453" height="453" usemap="#initialmap" style='z-index:2' />

<area alt='ch12' onmouseover="Show('12');" shape='poly'  coords="172,227,181,224,183,213,189,201,195,193,199,190,199,184,126,93,135,93,123,79,103,96,84,117,68,140,58,162,51,186,48,201,47,214,135,219,130,227,148,227,147,225,151,227,149,223,153,227,153,221,156,225,157,214,160,202,166,190,174,179,176,177,174,174,191,176,192,192,189,189,180,200,174,212,172,224,172,227"
   />
   
 <area alt='ch11' onmouseover="Show('11');" shape='poly'  coords="173,229,181,229,184,243,192,256,201,265,201,271,179,309,174,302,125,375,106,361,88,342,71,319,59,295,52,270,48,252,47,243,65,240,61,248,147,234,147,236,150,234,150,238,154,234,154,239,156,235,159,246,165,262,175,275,185,284,195,270,184,259,177,249,174,237,173,229"
   />  
   
  <area alt='ch10' onmouseover="Show('10');"  shape='poly'  coords="208,268,220,272,234,272,249,266,253,272,235,280,223,280,214,279,215,274,202,283208,298,209,295,222,297,239,296,251,293,261,288,259,293,262,290,262,296,264,294,65,298,266,295,276,310,266,309,304,389,285,398,259,404,241,406,210,407,187,402,169,398,152,390,158,373,162,380,203,273,208,268"
   />  
</map>


<map name='chapter12'>
<img usemap='#chapter12'  id="12" src='http://i.imgur.com/8DSTMEB.png' style='visibility:hidden;position:absolute;top:8;left:9;z-index:1' />
<area alt='ch12' onclick="clikedme('12');" onmouseout='hide("12");' shape='poly'  coords="152,222,142,226,135,229,129,227,135,220,125,220,88,215,66,215,52,215,47,212,47,202,50,188,54,170,65,151,76,129,82,115,92,103,100,96,110,90,122,84,123,81,135,92,123,90,144,117,181,158,176,178,174,173,190,172,185,169,162,187,187,170,160,190"
    />
<area alt='ch11' onmouseover="Show('11');" shape='poly'  coords="173,229,181,229,184,243,192,256,201,265,201,271,179,309,174,302,125,375,106,361,88,342,71,319,59,295,52,270,48,252,47,243,65,240,61,248,147,234,147,236,150,234,150,238,154,234,154,239,156,235,159,246,165,262,175,275,185,284,195,270,184,259,177,249,174,237,173,229"
   />  
   
  <area alt='ch10' onmouseover="Show('10');" shape='poly'  coords="208,268,220,272,234,272,249,266,253,272,235,280,223,280,214,279,215,274,202,283208,298,209,295,222,297,239,296,251,293,261,288,259,293,262,290,262,296,264,294,65,298,266,295,276,310,266,309,304,389,285,398,259,404,241,406,210,407,187,402,169,398,152,390,158,373,162,380,203,273,208,268"
   />  
</map>


<map name='chapter11'>
<img usemap='#chapter11'  id="11" src='http://i.imgur.com/m1OjWly.png' style='visibility:hidden;position:absolute;top:8;left:9;z-index:1' />
<area alt='ch12'    onmouseover="Show('12');" shape='poly'  coords="172,227,181,224,183,213,189,201,195,193,199,190,199,184,126,93,135,93,123,79,103,96,84,117,68,140,58,162,51,186,48,201,47,214,135,219,130,227,148,227,147,225,151,227,149,223,153,227,153,221,156,225,157,214,160,202,166,190,174,179,176,177,174,174,191,176,192,192,189,189,180,200,174,212,172,224,172,227"
   />
   
  <area alt='ch11' onclick="clikedme('11');" onmouseout='hide("11");' onclick="clikedme('11');" shape='poly'  coords="157,237,147,236,134,235,119,236,92,242,69,246,57,247,60,242,50,244,48,250,51,269,61,297,72,318,86,338,102,359,121,375,126,378,178,300,179,309,190,285,196,280,200,273,200,266,191,255,188,247,182,236,182,232,180,229,174,231,172,232,172,239,182,249,187,261,190,266,194,272,188,278,185,283,179,280,171,273,164,263"
   />  
   
<area alt='ch10' onmouseover="Show('10');" shape='poly'  coords="208,268,220,272,234,272,249,266,253,272,235,280,223,280,214,279,215,274,202,283208,298,209,295,222,297,239,296,251,293,261,288,259,293,262,290,262,296,264,294,65,298,266,295,276,310,266,309,304,389,285,398,259,404,241,406,210,407,187,402,169,398,152,390,158,373,162,380,203,273,208,268"
   />  
</map>

<map name='chapter10'>
<img usemap='#chapter10'   id="10" src='http://i.imgur.com/K2LYzdK.png' style='visibility:hidden;position:absolute;top:8;left:9;z-index:1' />
<area alt='ch12' onmouseover="Show('12');" shape='poly'  coords="152,222,142,226,135,229,129,227,135,220,125,220,88,215,66,215,52,215,47,212,47,202,50,188,54,170,65,151,76,129,82,115,92,103,100,96,110,90,122,84,123,81,135,92,123,90,144,117,181,158,176,178,174,173,190,172,185,169,162,187,187,170,160,190"
    />
<area alt='ch11' onmouseover="Show('11');" shape='poly'  coords="173,229,181,229,184,243,192,256,201,265,201,271,179,309,174,302,125,375,106,361,88,342,71,319,59,295,52,270,48,252,47,243,65,240,61,248,147,234,147,236,150,234,150,238,154,234,154,239,156,235,159,246,165,262,175,275,185,284,195,270,184,259,177,249,174,237,173,229"
   />  
   <area alt='ch10' onclick="clikedme('10');" onmouseout='hide("10");' shape='poly'  coords="206,273,187,310,162,379,158,372,153,387,177,399,200,403,224,405,245,405,261,405,279,398,291,393,301,389,291,364,275,342,270,320,266,313,264,308,271,304,262,292,235,295,220,297,212,297,206,295,205,299,202,289,207,279,209,275,212,273,212,279,231,279,243,277,250,274,252,273,252,269,214,270,207,269"
   />  
   
</map>

<p id="demo"></p>
<p id="hide"></p> 
<p id="clicked"></p> 

</body>
<script>
function Show(idi){
document.getElementById("demo").innerHTML = "I am inside show function "+idi; 
document.getElementById(idi).style.visibility = "visible"; 

}

  function hide(id) {
  document.getElementById("hide").innerHTML = "I am inside hide function "+id; 
    document.getElementById(id).style.visibility = "hidden";

  }
  
  function clikedme(i){
  document.getElementById("clicked").innerHTML = "I am inside clickedme function "+i; 
   document.getElementById(i).style.visibility = "visible";
   document.getElementById(i);
   //document.getElementById(i).style.z-index = 102;
 // document.getElementById(i).style.visibility="visible;
 
  }

</script>
</html>

**Beverleyh** · 03-10-2016, 07:28 PM

There is a lot going on in the other thread and people will not want to read through it all to glean/guess at your problem in the midst of somebody elses.

You need to be much more clear and concise. What exactly is your question? (Your post above is a series of statements with a large code dump.)

Please describe, in your own words, what the problem is, what you are trying to achieve, what you have tried, what isn't working, and explain what you'd like help with.

If you provide all of the requested information, people will be in a better situation to assess whether they can help you.

**Sweet_Karren** · 03-10-2016, 09:02 PM

Thank you Beverleyh. I am trying to create a image which has image map set up. On hover of an area of the image map, the hidden image should show up. on mouse out the previous image should get restored and on click the cliked image(hidden image form behind) should be set.
My problem is similar to the link i have given. In thatt the example was of europe map.

First post, so sorry for asking a question first, but I'm totally stuck on this.

I'm creating a web site for a spa bath company, and part of it is a map of europe where you hover over countries and they light up. You can click on a country and it stays lit. To this end, I've used a map of europe which contains an html map with multiple areas for each country. When you hover over the area, the country lights up (a previously invisible image of the country then appears above the map).

My problem is, and maybe its the technique I've used to code it, that when the image appears on top of the map (the lit country), if any of the map areas fall within the rectangle of the now visible image, they don't register. I'm assuming this is a z-index problem, but I've tried setting the z-index of the img of the europe map to higher than the images that appear on top, but this made no difference. tbh, wouldn't have worked if it did because then the country would appear below the europe map.

I think I need the html map areas of the base europe map to be a higher z-index than the image of the country that appears, but I can't work out how to do this. Setting a style of z-index to the map area has no effect - guess it doesn't support it.

Here is a sample of the html, I can supply the JS if needed, but I think its more the HTML that is the problem. In this particular example, when the france img becomes visible, because its been clicked on, the hover over of the belgium map does not register:

Code:

<map name='francemap'>
<area alt='France' onmouseout='HideCounty("france");' shape='poly' coords='62,2,87,27,99,33,94,41,94,47,90,47,78,59,78,66,86,67,86,74,84,76,85,90,89,94,85,94,75,99,69,94,58,92,46,97,46,105,33,98,23,98,12,87,22,59,22,48,17,46,17 ,36,2,23,4,19,11,19,13,23,22,25,26,24,26,14,34,19,42,19,43,16,51,13,56,7,57,1' />
</map>
<img border='0' alt='France' usemap='#francemap' onclick='ActivateCounty("france");' id="france" src='images/france-textured.png' style='visibility:hidden;position:absolute;top:554;left:571;z-index:1' />

<map name='belgiummap'>
<area alt='Belgium & Luxembourg' onmouseout='HideCounty("belgium");' shape='poly' coords='0,1,16,1,20,7,20,13,22,20,22,24,19,21,17,21,0,4' />
</map>
<img border='0' alt='Belgium & Luxembourg' usemap='#belgiummap' onclick='ActivateCounty("belgium");' id="belgium" src='images/belgium-textured.png' style='visibility:hidden;position:absolute;top:551;left:638;' />

<map name='europemap'>
<area alt='France' onmouseover='ShowCounty("france");' shape='poly' coords='144,245,169,270,181,276,176,284,176,290,172,290,160,302,160,309,168,310,168,317,166,319,167,333,171,337,167,337,157,342,151,337,140,335,128,340,128,348, 115,341,105,341,94,330,104,302,104,291,99,289,99,279,84,266,86,262,93,262,95,266,104,268,108,267,108,257,116,262,124,262,125,259,133,256,138,250,139,244' />
<area alt='Belgium & Luxembourg' onmouseover='ShowCounty("belgium");' shape='poly' coords='150,243,166,243,170,249,170,255,172,262,172,266,169,263,167,263,150,246' />
</map>

<table ID="Table1">
<tr>
<td style='width:628px'>
<div style='width:452px' id='stockistscontent'>&nbsp;</div> 
</td>
<td style='text-align:right;'>
<img id='europemap' border='0' src='images/europe-map-grey.jpg' usemap='#europemap' style='z-index:100' /><br>
</td>
</tr>
</table>

I have done the exact same thing for my image map. The solution given in that link is not that clear.

The solution given was this
Just tried it and it appears to work. Each country has its own map to determine when the mouse leaves the boundaries of the country (otherwise I'd have to wait until the mouse left the boundaries of the entire rectangular image). So, I merely used the co-ordinates of the smaller country (in the example Belgium and Luxemburg), worked out the relation to the image of the larger country, and added that <area> to the map of the country image.

Works like a treat.

So in the example above, I now have:

Code:

<map name='francemap'>
<area alt='France' onmouseout='HideCounty("france");' shape='poly' coords='62,2,87,27,99,33,94,41,94,47,90,47,78,59,78,66,86,67,86,74,84,76,85,90,89,94,85,94,75,99,69,94,58,92,46,97,46,105,33,98,23,98,12,87,22,59,22,48,17,46,17 ,36,2,23,4,19,11,19,13,23,22,25,26,24,26,14,34,19,42,19,43,16,51,13,56,7,57,1' />
<area alt='Belgium & Luxembourg' onmouseover='ShowCounty("belgium");' shape='poly' coords='66,0,82,0,86,6,86,12,88,19,88,23,85,20,83,20,66,3' />
</map>

I already have those Belgium and Luxembourg co-ordinates from the europe map. Simple job of working out the relative position on the france image, and then using excel to quickly transform the co-ordinates and cut and paste them in.

I did not understand how to find relative positions?

**Sweet_Karren** · 03-10-2016, 09:05 PM

http://www.dynamicdrive.com/forums/a...p/t-16285.html here is the link of what i am trying to acheive on my image map

**Sweet_Karren** · 03-10-2016, 09:07 PM

this is what i have tried but not able to get relative coordinates

Code:

<html>
<body>
<map name='initialmap'>
<img id="image" src="http://i.imgur.com/SY5h8EC.png?1" width="453" height="453" usemap="#initialmap" style='z-index:2' />

<area alt='ch12' onmouseover="Show('12');" shape='poly'  coords="172,227,181,224,183,213,189,201,195,193,199,190,199,184,126,93,135,93,123,79,103,96,84,117,68,140,58,162,51,186,48,201,47,214,135,219,130,227,148,227,147,225,151,227,149,223,153,227,153,221,156,225,157,214,160,202,166,190,174,179,176,177,174,174,191,176,192,192,189,189,180,200,174,212,172,224,172,227"
   />
   
 <area alt='ch11' onmouseover="Show('11');" shape='poly'  coords="173,229,181,229,184,243,192,256,201,265,201,271,179,309,174,302,125,375,106,361,88,342,71,319,59,295,52,270,48,252,47,243,65,240,61,248,147,234,147,236,150,234,150,238,154,234,154,239,156,235,159,246,165,262,175,275,185,284,195,270,184,259,177,249,174,237,173,229"
   />  
   
  <area alt='ch10' onmouseover="Show('10');"  shape='poly'  coords="208,268,220,272,234,272,249,266,253,272,235,280,223,280,214,279,215,274,202,283208,298,209,295,222,297,239,296,251,293,261,288,259,293,262,290,262,296,264,294,65,298,266,295,276,310,266,309,304,389,285,398,259,404,241,406,210,407,187,402,169,398,152,390,158,373,162,380,203,273,208,268"
   />  
</map>


<map name='chapter12'>
<img usemap='#chapter12'  id="12" src='http://i.imgur.com/8DSTMEB.png' style='visibility:hidden;position:absolute;top:8;left:9;z-index:1' />
<area alt='ch12' onclick="clikedme('12');" onmouseout='hide("12");' shape='poly'  coords="152,222,142,226,135,229,129,227,135,220,125,220,88,215,66,215,52,215,47,212,47,202,50,188,54,170,65,151,76,129,82,115,92,103,100,96,110,90,122,84,123,81,135,92,123,90,144,117,181,158,176,178,174,173,190,172,185,169,162,187,187,170,160,190"
    />
<area alt='ch11' onmouseover="Show('11');" shape='poly'  coords="173,229,181,229,184,243,192,256,201,265,201,271,179,309,174,302,125,375,106,361,88,342,71,319,59,295,52,270,48,252,47,243,65,240,61,248,147,234,147,236,150,234,150,238,154,234,154,239,156,235,159,246,165,262,175,275,185,284,195,270,184,259,177,249,174,237,173,229"
   />  
   
  <area alt='ch10' onmouseover="Show('10');" shape='poly'  coords="208,268,220,272,234,272,249,266,253,272,235,280,223,280,214,279,215,274,202,283208,298,209,295,222,297,239,296,251,293,261,288,259,293,262,290,262,296,264,294,65,298,266,295,276,310,266,309,304,389,285,398,259,404,241,406,210,407,187,402,169,398,152,390,158,373,162,380,203,273,208,268"
   />  
</map>


<map name='chapter11'>
<img usemap='#chapter11'  id="11" src='http://i.imgur.com/m1OjWly.png' style='visibility:hidden;position:absolute;top:8;left:9;z-index:1' />
<area alt='ch12'    onmouseover="Show('12');" shape='poly'  coords="172,227,181,224,183,213,189,201,195,193,199,190,199,184,126,93,135,93,123,79,103,96,84,117,68,140,58,162,51,186,48,201,47,214,135,219,130,227,148,227,147,225,151,227,149,223,153,227,153,221,156,225,157,214,160,202,166,190,174,179,176,177,174,174,191,176,192,192,189,189,180,200,174,212,172,224,172,227"
   />
   
  <area alt='ch11' onclick="clikedme('11');" onmouseout='hide("11");' onclick="clikedme('11');" shape='poly'  coords="157,237,147,236,134,235,119,236,92,242,69,246,57,247,60,242,50,244,48,250,51,269,61,297,72,318,86,338,102,359,121,375,126,378,178,300,179,309,190,285,196,280,200,273,200,266,191,255,188,247,182,236,182,232,180,229,174,231,172,232,172,239,182,249,187,261,190,266,194,272,188,278,185,283,179,280,171,273,164,263"
   />  
   
<area alt='ch10' onmouseover="Show('10');" shape='poly'  coords="208,268,220,272,234,272,249,266,253,272,235,280,223,280,214,279,215,274,202,283208,298,209,295,222,297,239,296,251,293,261,288,259,293,262,290,262,296,264,294,65,298,266,295,276,310,266,309,304,389,285,398,259,404,241,406,210,407,187,402,169,398,152,390,158,373,162,380,203,273,208,268"
   />  
</map>

<map name='chapter10'>
<img usemap='#chapter10'   id="10" src='http://i.imgur.com/K2LYzdK.png' style='visibility:hidden;position:absolute;top:8;left:9;z-index:1' />
<area alt='ch12' onmouseover="Show('12');" shape='poly'  coords="152,222,142,226,135,229,129,227,135,220,125,220,88,215,66,215,52,215,47,212,47,202,50,188,54,170,65,151,76,129,82,115,92,103,100,96,110,90,122,84,123,81,135,92,123,90,144,117,181,158,176,178,174,173,190,172,185,169,162,187,187,170,160,190"
    />
<area alt='ch11' onmouseover="Show('11');" shape='poly'  coords="173,229,181,229,184,243,192,256,201,265,201,271,179,309,174,302,125,375,106,361,88,342,71,319,59,295,52,270,48,252,47,243,65,240,61,248,147,234,147,236,150,234,150,238,154,234,154,239,156,235,159,246,165,262,175,275,185,284,195,270,184,259,177,249,174,237,173,229"
   />  
   <area alt='ch10' onclick="clikedme('10');" onmouseout='hide("10");' shape='poly'  coords="206,273,187,310,162,379,158,372,153,387,177,399,200,403,224,405,245,405,261,405,279,398,291,393,301,389,291,364,275,342,270,320,266,313,264,308,271,304,262,292,235,295,220,297,212,297,206,295,205,299,202,289,207,279,209,275,212,273,212,279,231,279,243,277,250,274,252,273,252,269,214,270,207,269"
   />  
   
</map>

<p id="demo"></p>
<p id="hide"></p> 
<p id="clicked"></p> 

</body>
<script>
function Show(idi){
document.getElementById("demo").innerHTML = "I am inside show function "+idi; 
document.getElementById(idi).style.visibility = "visible"; 

}

  function hide(id) {
  document.getElementById("hide").innerHTML = "I am inside hide function "+id; 
    document.getElementById(id).style.visibility = "hidden";

  }
  
  function clikedme(i){
  document.getElementById("clicked").innerHTML = "I am inside clickedme function "+i; 
   document.getElementById(i).style.visibility = "visible";
   document.getElementById(i);
   //document.getElementById(i).style.z-index = 102;
 // document.getElementById(i).style.visibility="visible;
 
  }

</script>
</html>