www.webdeveloper.com
Results 1 to 5 of 5

Thread: Mouseover changing images in an image map

  1. #1
    Join Date
    Jul 2009
    Posts
    2

    Mouseover changing images in an image map

    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.

  2. #2
    Join Date
    Jul 2009
    Posts
    4
    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

  3. #3
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,667
    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>
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  4. #4
    Join Date
    Jul 2009
    Posts
    2
    Could you explain the code a little? I can't see where image 'Three' is loaded.

  5. #5
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,667
    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
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles