Mouseover changing images in an image map

**djc** · 07-10-2009 10:33 AM

I have a large picture with many little boxes in it. As the user moves the mouse over a box, I would like to change the image of what is in the box. Currently I have only found how to change the entire image. I could make it work by making tons of pictures each of which has a different box with the color changed and then match them with the correct map hot stops, but I want to know if there is a better solution; a way of simply overlaying a smaller image at a certain hot spot when the mouse is placed over it. Is this possible?

Here is the section of my current code (it changes the entire image when the mouse if moved over a single hot spot) :

Code:

<SCRIPT LANGUAGE="javascript">
Image1 = new Image(1041,887)
Image1.src = "_images/Lean_Chart.JPG"

Image2 = new Image(52,47)
Image2.src = "_images/little_plane.JPG"
</SCRIPT> 

<p><img name="emp" src="_images/Lean_Chart.JPG" usemap="#ep" alt="Lean Tool Chart" width="1041" height="887" border="0"/>

<SCRIPT LANGUAGE="javascript">

function change() {
document.emp.src = Image2.src; return true;
}

function original() {
document.emp.src = Image1.src; return true;
}

</SCRIPT> 

<map name="ep">
  <area shape="rect" coords="512,776,568,821" href="#" onMouseOver="change()" onMouseOut="original()"/>
  <area shape="rect" coords="510,821,566,866" href="#" />
  <area shape="rect" coords="566,777,622,822" href="#" />
  <area shape="rect" coords="456,777,512,822" href="#" />
  <area shape="rect" coords="399,776,455,821" href="#" />
  <area shape="rect" coords="454,821,510,866" href="#" />
  <area shape="rect" coords="231,778,287,823" href="#" />
  <area shape="rect" coords="232,821,288,866" href="#" />
  <area shape="rect" coords="288,778,344,823" href="#" />
  <area shape="rect" coords="287,822,343,867" href="#" />
  <area shape="rect" coords="399,820,455,865" href="#" />
  <area shape="rect" coords="342,777,398,822" href="#" />
  <area shape="rect" coords="623,821,679,866" href="#" />
  <area shape="rect" coords="342,821,398,866" href="#" />
  <area shape="rect" coords="568,821,624,866" href="#" />
  <area shape="rect" coords="679,570,735,615" href="#" />
  <area shape="rect" coords="229,441,287,484" href="#" />
  <area shape="rect" coords="287,441,345,484" href="#" />
  <area shape="rect" coords="341,441,399,484" href="#" />
  <area shape="rect" coords="398,441,456,484" href="#" />
  <area shape="rect" coords="230,484,288,527" href="#" />
  <area shape="rect" coords="285,484,343,527" href="#" />
  <area shape="rect" coords="340,484,398,527" href="#" />
  <area shape="rect" coords="454,441,512,484" href="#" />
  <area shape="rect" coords="397,483,455,526" href="#" />
  <area shape="rect" coords="509,441,567,484" href="#" />
  <area shape="rect" coords="621,441,679,484" href="#" />
  <area shape="rect" coords="677,441,735,484" href="#" />
  <area shape="rect" coords="567,441,624,484" href="#" />
  <area shape="rect" coords="622,485,680,530" href="#" />
  <area shape="rect" coords="678,485,739,528" href="#" />
  <area shape="rect" coords="678,528,735,573" href="#" />
  <area shape="rect" coords="621,530,681,574" href="#" />
  <area shape="rect" coords="566,484,626,530" href="#" />
  <area shape="rect" coords="567,530,623,574" href="#" />
  <area shape="rect" coords="622,571,679,618" href="#" />
  <area shape="rect" coords="623,777,679,822" href="#" />
  <area shape="rect" coords="566,573,623,620" href="#" />
  <area shape="rect" coords="510,573,567,620" href="#" />
  <area shape="rect" coords="455,572,512,619" href="#" />
  <area shape="rect" coords="398,570,455,617" href="#" />
  <area shape="rect" coords="341,572,398,619" href="#" />
  <area shape="rect" coords="286,572,343,619" href="#" />
  <area shape="rect" coords="231,573,288,620" href="#" />
  <area shape="rect" coords="511,528,568,571" href="#" />
  <area shape="rect" coords="512,482,569,529" href="#" />
  <area shape="rect" coords="455,529,512,573" href="#" />
  <area shape="rect" coords="454,484,511,528" href="#" />
  <area shape="rect" coords="398,525,455,572" href="#" />
  <area shape="rect" coords="343,529,398,572" href="#" />
  <area shape="rect" coords="285,527,342,574" href="#" />
  <area shape="rect" coords="229,526,286,573" href="#" />
  <area shape="rect" coords="789,231,846,278" href="#" />
  <area shape="rect" coords="734,231,791,278" href="#" />
  <area shape="rect" coords="680,232,737,279" href="#" />
  <area shape="rect" coords="621,232,678,279" href="#" />
  <area shape="rect" coords="564,233,621,280" href="#" />
  <area shape="rect" coords="511,232,568,279" href="#" />
  <area shape="rect" coords="455,231,512,278" href="#" />
  <area shape="rect" coords="398,232,455,279" href="#" />
  <area shape="rect" coords="342,232,399,279" href="#" />
  <area shape="rect" coords="286,232,343,279" href="#" />
  <area shape="rect" coords="231,231,288,278" href="#" />
  <area shape="rect" coords="846,138,903,185" href="#" />
  <area shape="rect" coords="958,185,1015,232" href="#" />
  <area shape="rect" coords="903,185,960,232" href="#" />
  <area shape="rect" coords="847,186,904,233" href="#" />
  <area shape="rect" coords="791,186,848,233" href="#" />
  <area shape="rect" coords="735,186,792,233" href="#" />
  <area shape="rect" coords="789,138,846,185" href="#" />
  <area shape="rect" coords="343,186,400,233" href="#" />
  <area shape="rect" coords="285,187,342,234" href="#" />
  <area shape="rect" coords="230,186,287,233" href="#" />
  <area shape="rect" coords="960,231,1017,278" href="#" />
  <area shape="rect" coords="901,233,958,280" href="#" />
  <area shape="rect" coords="904,139,961,186" href="#" />
  <area shape="rect" coords="959,139,1016,186" href="#" />
  <area shape="rect" coords="677,186,734,233" href="#" />
  <area shape="rect" coords="621,185,678,232" href="#" />
  <area shape="rect" coords="565,187,622,234" href="#" />
  <area shape="rect" coords="510,187,567,234" href="#" />
  <area shape="rect" coords="845,232,902,279" href="#" />
  <area shape="rect" coords="453,186,510,233" href="#" />
  <area shape="rect" coords="231,139,286,185" href="#" />
  <area shape="rect" coords="288,140,345,187" href="#" />
  <area shape="rect" coords="345,139,400,185" href="#" />
  <area shape="rect" coords="399,138,454,186" href="#" />
  <area shape="rect" coords="455,138,510,186" href="#" />
  <area shape="rect" coords="510,139,569,185" href="#" />
  <area shape="rect" coords="569,139,623,186" href="#" />
  <area shape="rect" coords="623,138,679,186" href="#" />
  <area shape="rect" coords="680,139,735,185" href="#" />
  <area shape="rect" coords="734,139,790,186" href="#" />
  <area shape="rect" coords="398,187,455,234" href="#" /></map>

Thank you in advance. I am new to js.

**jamesp3** · 07-11-2009 12:10 AM

I can't think of any simple way to do it. What you could do is create a hidden image and show it on mouse over using CSS.

I only tested this with firefox but I think it should work with IE as well.

index.htm

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Image Map with CSS rollever images</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript">
function change(x1,y1,x2,y2,newSrc,newLink)
{
rollParent=document.getElementById("rollover");
rollImg=document.getElementById("rollover").getElementsByTagName("img")[0];
document.getElementById("rollover").getElementsByTagName("a")[0].href=newLink;
rollImg.src=newSrc;
rollParent.style.display="block";
rollParent.style.left=x1+"px";
rollParent.style.top=y1+"px";
rollImg.style.width=(x2-x1)+"px";
rollImg.style.height=(y2-y1)+"px";
}
function revert()
{
rollParent=document.getElementById("rollover");
rollParent.style.display="none";
}
</script>
</head>
<body>
<div id = "mainimage">
<map name = "imagemap">
  <area shape="rect" coords="0,0,250,182" onmouseover="change(0,0,250,182,'images/1.jpg','http://www.google.com')"/>
  <area shape="rect" coords="250,0,500,182"  onmouseover="change(250,0,500,182,'images/2.jpg','http://www.google.com')"/>
  <area shape="rect" coords="0,182,250,375"  onmouseover="change(0,182,250,375, 'images/3.jpg','http://www.google.com')"/>
  <area shape="rect" coords="250,182,500,375"  onmouseover="change(250,182,500,375,'images/4.jpg','http://www.google.com')"/>
</map>
<div id="rollover">
<a href = "#">
<img src="images/image.jpg" onmouseout="revert()"/>
</a>
</div>
<img src="images/image.jpg" usemap="#imagemap"/>
</div>
</body>
</html>

style.css

Code:

#mainimage img
{
border: none;
}
#rollover 
{
width: 0px;
height: 0px;
position: relative;
display: none;
}
#rollover img
{
border: none;
display: block;
position: absolute;
z-index: 2;
}

There's likely a better way than this but it should work.
after making this I realized there's probably a way to just pass which block you moused over to the function and let it extract the information from it rather than passing all the information over again.

images I used for example:
http://img8.imageshack.us/img8/2789/imagewzn.jpg - image.jpg
http://img34.imageshack.us/img34/3078/44646350.jpg - 1.jpg
http://img8.imageshack.us/img8/2997/77061065.jpg - 2.jpg
http://img509.imageshack.us/img509/5142/94689644.jpg - 3.jpg
http://img509.imageshack.us/img509/9932/93764601.jpg - 4.jpg

**vwphillips** · 07-11-2009 02:07 AM

Code:

<!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" xml:lang="en" lang="en">

<head>
  <title></title>
<style type="text/css">
/*<![CDATA[*/
.p {
 position:relative;width:200px;height:200px;
}

.p IMG{
 position:absolute;border-Width:0px;
}
/*]]>*/
</style>

<script  type="text/javascript">
/*<![CDATA[*/

function Toggle(id,from,to){
 var img=document.getElementById(id);
 img.src=img.src.replace(from,to);
}
/*]]>*/
</script>

</head>

<body>
<div class="p" >
<img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="200" height="200" />
<img id="img1" src="http://www.vicsjavascripts.org.uk/StdImages/Two.gif" width="50" height="50" style="left:50px;top:50px;" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" width="200" height="200"  usemap="#Map1" ismap="ISMAP" />

</div>
 <map name="Map1" id="map" >
  <area shape="rect" alt="" coords="50,50,100,100"  onmouseover="Toggle('img1','Two','Three');"   onmouseout="Toggle('img1','Three','Two');"/>
 </map>
</body>

</html>

**djc** · 07-13-2009 10:51 AM

Could you explain the code a little? I can't see where image 'Three' is loaded.

**vwphillips** · 07-13-2009 11:43 AM

the image src is http://www.vicsjavascripts.org.uk/StdImages/Two.gif

if 'Two' is replaced with 'Three' it becomes

the image src is http://www.vicsjavascripts.org.uk/StdImages/Three.gif
this is one of many ways to swap an image src.

I can't think of any simple way to do it.

The blank image overlay withan image map is the point of my post

Thread: Mouseover changing images in an image map

Thread Tools

Display

Mouseover changing images in an image map

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions