Menu
Hi! I want to display an image (wich is actually a image map) that i’m trying to get it to be replaced by another image (another image map). The way i want it to work is: have the previous image map replaced by another one, depending on the speficic area you clicked.
So far I’ve managed to acomplish this for the first image replacement, but then the second image map is not working. There is also another problem, this works for IE under Windows but not for FF under Linux.
Here’s the code:
(…)
function change_pic(area,image_name,image_map)
{
document.getElementById(area).src=image_name;
document.getElementById(area).useMap=image_map;
}
(…)
<img id=”body_img” class=”body_map” src=”img/body2.jpg” usemap=”#full_body” border=”0″>
<map id=”full_body” name=”full_body”>
<a href=”#” onclick=”change_pic(‘body_img’,’img/head.jpg’,’#full_head’)”>
<area shape=”rect” coords=”136,7,168,46″ alt=”Head”>
</a>
<a href=”#” onclick=”change_pic(‘body_img’,’img/body_torso_head.jpg’,’#upper_torso’)”>
<area shape=”rect” coords=”115,46,180,170″ alt=”Torso”>
</a>
</map>
<map id=”full_head” name=”full_head”>
<a href=”#” onclick=”change_pic(‘body_img’,’img/eyeball.jpg’,’#full_eye”)”><area shape=”circle” coords=”135,198,51″ alt=”Eyeball”></a>
</map>
<map id=”upper_torso” name=”upper_torso”>
</map>
<br>