• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1756
  • Last Modified:

Simple image swap upon mouseover using javascript

I should know this by now but what is the simplest way with javascript of swapping an image in another div?
In this file (http://www.discretedata.com/A1/Rollover4/SimpleRollover.html), I want to switch the car image when I mouseover the different links in the nav bar. Please add all the necessary javascript to my html and post the complete new html here.

Thanks!

John
0
gabrielPennyback
Asked:
gabrielPennyback
  • 3
  • 2
1 Solution
 
FinecCommented:
Hy!

First, add an id to your image: "<img id="car_pic" ..." , and make two JSs: first to change the pic to an other, and one for change it back to the original. Give these methods to the mouseover elements in your links, in this way:

onMouserOver="change_picture('greencar.jpg')" onMouserOut="restore()";

I don't try the code, i hope it'll work.

(or you can use hidden layers in the same way, and change theirs display property between 'block' and 'none')
var picture = document.getElementById('car_pic');
var default_src = picture.src;
 
function change_picture(to)
{
  picture.src = 'http://www.discretedata.com/A1/Rollover4/images/'+to;
}
 
function restore()
{
  picture.src = default_src;
}

Open in new window

0
 
GoofyDawgCommented:
The following should work. I just basically put an onmouseover event and have it execute the switchImage function.

<!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"><head>
 
 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<style>
#container {width:650px; height: 400px; background-color:#99CC99; font-size:16px; font-weight:bold; color:#FFFFFF; ; padding-top:40px; text-align:center; margin: 0 auto; }
.imageFlipper{width:600px; margin: 0 auto; background-color:#00FFFF}
.image2Bflipped{ width:124px; margin: 0 auto;  margin-top:60px;background-color:#FFFFFF}
 
</style>
 
<script type="text/javascript">
  function switchImage(cntr,img) {
    var html="<img src=\"SimpleRollover_files/" + img + "\" height=\"93\" width=\"124\">";
    var container = document.getElementById(cntr);
    container.innerHTML = html;
  }
</script>
 
</head><body>
 
<div id="container">
  <div class="imageFlipper">
  
  
      
     <img src="SimpleRollover_files/menu.jpg" usemap="#Map" border="0" height="40" width="600">
        <map name="Map" id="Map">
          <area shape="rect" coords="40,7,120,33" onmouseover="switchImage('flip','redcar.jpg');" alt="redcar">
          <area shape="rect" coords="244,8,345,32" onmouseover="switchImage('flip','greencar.jpg');" alt="greencar">
          <area shape="rect" coords="466,7,556,32" onmouseover="switchImage('flip','greycar.jpg');" alt="greycar">
        </map>
        
      </div>
 
 
<div class="image2Bflipped" id="flip"><img src="SimpleRollover_files/greycar.jpg" height="93" width="124"></div>
 
</div>
</body></html>

Open in new window

0
 
gabrielPennybackReliability Business Tools Analyst IIAuthor Commented:
Finec, I took my best shot at adding your code, but it didn't work.  If you can, please fix the first snippet of code below (MY CODE WITH FINEC'S POST) and then re-post the corrected code in its entirety. Otherwise I might still put something in the wrong place.

GoofyDawg, I tried your code  (both "AS-IS" and with the image locations changed to reference the images where they actually are located) ,  and nothing happened.  If you can, please fix the second snippet of code below (MY CODE WITH GOOFYDAWG'S POST) and then re-post the corrected code in its entirety. Otherwise I might still put something in the wrong place.

Also, please take a look at how they handle this at this site: http://www.ageinc.com/  I tried to adapt their code but coyuldn't figure out how to do it.  If you can fix my code done their way, that would be great too.  As always please repot the corrected code in its entirety.


Thanks,

John
MY CODE WITH FINEC'S POST
 
 
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>rollover_Finec</title>
</head>
<style>
#container {width:650px; height: 400px; background-color:#99CC99; font-size:16px; font-weight:bold; color:#FFFFFF; ; padding-top:40px; text-align:center; margin: 0 auto; }
.imageFlipper{width:600px; margin: 0 auto; background-color:#00FFFF}
.image2Bflipped{ width:124px; margin: 0 auto;  margin-top:60px;background-color:#FFFFFF}
 
</style>
 
<script>
var picture = document.getElementById('car_pic');
var default_src = picture.src;
 
function change_picture(to)
{
  picture.src = 'http://www.discretedata.com/A1/Rollover4/images/'+to;
}
 
function restore()
{
  picture.src = default_src;
}
</script>
<body>
 
<div id="container">
  <div class="imageFlipper">
  
  
      
     <img src="http://www.discretedata.com/A1/Rollover4/images/menu.jpg" width="600" height="40" border="0" usemap="#Map" />
        <map name="Map" id="Map">
          <area shape="rect" coords="40,7,120,33" href="#" alt="redcar" />
          <area shape="rect" coords="244,8,345,32" href="#" alt="greencar" />
          <area shape="rect" coords="466,7,556,32" href="#" alt="greycar" />
        </map>
        
      </div>
 
 
<div class="image2Bflipped"><img src="http://www.discretedata.com/A1/Rollover4/images/greycar.jpg" name="car_pic" width="124" height="93" id="car_pic" /></div>
 
</div>
</body>
</html>
 
 
 
MY CODE WITH GOOFYDAWG'S FIX
 
<!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">
 
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>GoofyDawg</title>
</head>
<style>
#container {width:650px; height: 400px; background-color:#99CC99; font-size:16px; font-weight:bold; color:#FFFFFF; ; padding-top:40px; text-align:center; margin: 0 auto; }
.imageFlipper{width:600px; margin: 0 auto; background-color:#00FFFF}
.image2Bflipped{ width:124px; margin: 0 auto;  margin-top:60px;background-color:#FFFFFF}
 
</style>
<script type="text/javascript">
  function switchImage(cntr,img) {
    var html="<img src=\"http://www.discretedata.com/A1/Rollover4/images/" + img + "\" height=\"93\" width=\"124\">";
    var container = document.getElementById(cntr);
    container.innerHTML = html;
  }
</script>
 
<body>
 
<div id="container">
  <div class="imageFlipper">
  
  
      
     <img src="http://www.discretedata.com/A1/Rollover4/images/menu.jpg" width="600" height="40" border="0" usemap="#Map" />
 
        <map name="Map" id="Map">
          <area shape="rect" coords="40,7,120,33" href="#"onmouseover="switchImage('flip','http://www.discretedata.com/A1/Rollover4/images/redcar.jpg');" alt="redcar">
          <area shape="rect" coords="244,8,345,32" href="#"onmouseover="switchImage('flip','http://www.discretedata.com/A1/Rollover4/images/greencar.jpg');" alt="greencar">
          <area shape="rect" coords="466,7,556,32" href="#"onmouseover="switchImage('flip','http://www.discretedata.com/A1/Rollover4/images/greycar.jpg');" alt="greycar">
        </map>
        
      </div>
 
 
<div class="image2Bflipped"><img src="http://www.discretedata.com/A1/Rollover4/images/greycar.jpg" width="124" height="93" /></div>
 
</div>
</body>
 
</html>

Open in new window

0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
FinecCommented:
Hy!

You forgot to insert the onMouseOver and onMouseOut events to the area-s. Here you are the full HTML.
<!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">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Rollover Finec</title>
  <style type="text/css">
    #container {width:650px; height: 400px; background-color:#99CC99; font-size:16px; font-weight:bold; color:#FFFFFF; ; padding-top:40px; text-align:center; margin: 0 auto; }
    .imageFlipper{width:600px; margin: 0 auto; background-color:#00FFFF}
    .image2Bflipped{ width:124px; margin: 0 auto;  margin-top:60px;background-color:#FFFFFF}
  </style>
   
  <script type="text/javascript">
  <!--
  
    var picture = false;
    var default_src= false;
    
    window.onload = function() 
    {
      picture = document.getElementById('car_pic');
      default_src = picture.src;
    }
     
    function change_picture(to)
    {
      picture.src = 'http://www.discretedata.com/A1/Rollover4/images/'+to;
    }
     
    function restore()
    {
      picture.src = default_src;
    }
  
  -->
  </script>
</head>
<body>
 
<div id="container">
  <div class="imageFlipper">
  
     <img src="http://www.discretedata.com/A1/Rollover4/images/menu.jpg" width="600" height="40" border="0" usemap="#Map" />
     <map name="Map" id="Map">
       <area shape="rect" coords="40,7,120,33" onMouseOver="change_picture('redcar.jpg');" onMOuseOut="restore();" href="#" alt="redcar" />
       <area shape="rect" coords="244,8,345,32" onMouseOver="change_picture('greencar.jpg');" onMOuseOut="restore();"  href="#" alt="greencar" />
       <area shape="rect" coords="466,7,556,32" onMouseOver="change_picture('greycar.jpg');" onMOuseOut="restore();"  href="#" alt="greycar" />
     </map>
        
  </div>
 
  <div class="image2Bflipped">
    <img src="http://www.discretedata.com/A1/Rollover4/images/greycar.jpg" name="car_pic" id="car_pic" />
  </div>
 
</div>
 
</body>
</html>

Open in new window

0
 
gabrielPennybackReliability Business Tools Analyst IIAuthor Commented:
Thanks so much, Finec, I really appreciate it.  I notice you also changed:

var picture = document.getElementById('car_pic');
var default_src = picture.src;

to:

    var picture = false;
    var default_src= false;
   
    window.onload = function()
    {
      picture = document.getElementById('car_pic');
      default_src = picture.src;
    }

Without that change it doesn't work.  (Although I did notice that I don't need " var picture = false;  var default_src= false;" before window.onload)

What are the rules here?   When do you have to declare "window.onload ="? Always  before the function? How do I know that I have to say "picture = document.getElementById('car_pic');"  instead of "var picture = document.getElementById('car_pic');" ?  Is "picture" a proprietary javascript term or could it be anything?

I'd be happy to post a new question with some of these points, just let me know.  Also if you can direct me to a site that shows a glossary of terms with complete idiot-proof instructions on how to use them, please let me know.

Thanks1

John
0
 
FinecCommented:
Hy!

I used window.onload, because if you use "var picture = document.getElementById('car_pic');" before you browser render the site, you haven't got any element of the document with 'car_pic' id, but when the page(window) is loaded, the winow.onload function runs.

Hope to be clear :)
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now