asked on

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

Finec

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

GoofyDawg

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

John Carney

ASKER

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

ASKER CERTIFIED SOLUTION

Finec

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

John Carney

ASKER

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

Finec

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 :)