Solved

Simple image swap upon mouseover using javascript

Posted on 2008-10-06
6
1,734 Views
Last Modified: 2012-05-05
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
Comment
Question by:gabrielPennyback
  • 3
  • 2
6 Comments
 
LVL 4

Expert Comment

by:Finec
ID: 22655367
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
 
LVL 12

Expert Comment

by:GoofyDawg
ID: 22655409
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
 
LVL 1

Author Comment

by:gabrielPennyback
ID: 22655824
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
Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

 
LVL 4

Accepted Solution

by:
Finec earned 500 total points
ID: 22656828
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
 
LVL 1

Author Comment

by:gabrielPennyback
ID: 22663524
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
 
LVL 4

Expert Comment

by:Finec
ID: 22663735
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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Suggested Solutions

Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

707 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now