• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1761
  • 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
John Carney
Asked:
John Carney
  • 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
 
John CarneyReliability 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
Cloud Class® Course: Microsoft Office 2010

This course will introduce you to the interfaces and features of Microsoft Office 2010 Word, Excel, PowerPoint, Outlook, and Access. You will learn about the features that are shared between all products in the Office suite, as well as the new features that are product specific.

 
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
 
John CarneyReliability 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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: SQL Server Core 2016

This course will introduce you to SQL Server Core 2016, as well as teach you about SSMS, data tools, installation, server configuration, using Management Studio, and writing and executing queries.

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