zindex (?) help needed around HTML <map>

[gadj]

Hi

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:

<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>

Any help would be very gratefully received.

[djr33]

A link to your page would help as well.

The problem makes sense, but I'm not sure about the solution.

I think one option here is that you change your strategy:

1. Set the background of the div (set to height/width of img) to the map.
2. Place those transparent images above it, set to transparent until the section is clicked.
3. Place a TRANSPARENT image on top, with an image map on it.

So... you'll always be clicking on the uppermost level, meaning the transparent image, and the display will work properly as well.

if you could set it to transparent with javascript, that's likely the best idea, rather than using a clear gif, because then if someone tried to save your image with right click, they'd get the map, not some weird blank gif. (Unless you don't care about people being able to save your image, I suppose.)

[gadj]

Thanks for the reply.

I'd actually had (sad I know) a dream about this last night, and woke up with a potential solution.

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:

<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.

Tell ya what, this job is seriously improving my european geography

[djr33]

Haha, yeah, I bet the geography is becoming clear.

Think about my solution, though. It would save a lot of that transfer.

I thought of using an image map on the smaller image as well, but seemed like more work than might be worth it.

[gadj]

Well if I used a transparent image higher up the z-order, I'd still have to put a map on that image, otherwise when you hit the border of that image (the rectangle) then the image would appear, which might still be a way off the boundary of that country.

[djr33]

Maybe I didn't explain it clearly.

Lowest layer: background image of the WHOLE map.
Middle layer: all of your little pieces that turn yellow or whatever. Small images.
Highest layer: FULL SIZE IMAGE that is transparent, with the FULL image map on it.

I don't see the issue here. Just copy your existing image map and image and put it on top, then make transparent, and you're done. Should work great.

[Sweet_Karren]

Hi,
I am trying to do exact same thing with an image. however i dotn know what should be written in functions ShowCounty("belgium") and onclick code.

[ddadmin]

Sweet_Karren, this is a really old thread- if you have a similar question to the original poster, please start a new thread and detail your problem. I'm going to close this thread.