Javascript for Image Map Variations

[tylergibbs]

I'm struggling to create a semi-complex image set for a clients home page. We have 4 images; 1 primary image (onLoad) and 3 variations (onMouseOver). Each image has 3 'buttons' or spaces within an image map. Each individual image ALSO has a few other links that are required in differing locations. When hovering over any of the three buttons, I want the entire image to change as well as the image map associated to it.

Hopefully I've explained this well enough; please help as I am deparate for ideas and have a deadline for tomorrow at noon!

Thanks alot in advance!

 

[vacunita]

Instead of trying to modify the image map, I think it would be better to create 3 different image maps, and show/hide those depending on what is clicked.


For instance:

<div name="mymaps" id="imagemapone">
imagemap code here...
</div>

<div name="mymaps" id="imagemaptwo" style="display:none;">
imagemap code here
</div>

<div name="mymaps" id="imagemapthree" style="display:none;">
imagemap code here...
</div>


<area shape="rect" coords="0,0,82,126" href="javascript:showmap('imagemaptwo','imagemap1');">Show Image Map 2 </a>
In the links use a JS call to a function that changes the display of each of the maps:



function showmap(mapidtoshow,maptohideid){



document.getElementById(maptohideid).style.display=none;
document.getElementById(mapidtoshow).style.display=block;

}

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[tylergibbs]

I resolved my problem with alot of work but thanks anyways!