Changing an external image upon rollover of a button or other image

How can I modify the html code below so that up upon rollover, the image inside "header" also switched from to switch the image in header from "BluishHeader2.jpg" to "BluishHeader3.jpg"?

In actual use, I want to attach this behavior to nav bar buttons s in another more complicated doc that doesn't have any of the supporting javascript in it yet, but this seems a good place to start.

Thanks!
John
<!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>bed &amp; bath</title>
 
<script type="text/javascript"> /*<a href="AC_RunActiveContent.js">AC_RunActiveContent.js</a>*/
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
 
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}
 
function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<style type="text/css">
<!--
#container {
	font-family: "Gill Sans MT";
	font-size: 14px;
	margin: 0 auto;
	height: 700px;
	width: 890px;
	margin-top: 20px;
	background-color: #CCCCFF;
}
#header {
 
	height: 100px;
	width: 890px;
	margin: 0 auto;
	background-image: url(images/BluishHeader2.jpg);
}
#gallery {
	background-color: #FFFFFF;
	height: 100px;
	width: 400px;
	margin: 0 auto;
	margin-top: 100px;
}
-->
</style>
</head>
 
<body onload="MM_preloadImages('images/SonyVaioMini.jpg')">
<div id="header">
</div>
<div id="container">
 
  <div id="gallery"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover=		"MM_swapImage('Image1','','images/SonyVaioMini.jpg',1)"><span class="style1"><img src="images/Playstation.jpg" name="Image1" width="96" height="97" border="0" id="Image1" /></span></a></div>
    
</div>
</body>
</html>

Open in new window

LVL 1
gabrielPennybackReliability Business Tools Analyst IIAsked:
Who is Participating?
 
bdichiaraConnect With a Mentor Commented:
0
 
LordWolfyCommented:
That looks like dreamweaver-generated code (very ugly stuff indeed!)

The javascript code you will need in order to change the background is as follows:

document.getElementById('header').style.background-image='BluishHeader2.jpg';

Your mouseover would trigger this and you woudl have a similar one for your mouseout to set it back to BluishHeader2.jpg
0
 
LordWolfyCommented:
and there should be a 3 in there somewhere :p
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.

 
gabrielPennybackReliability Business Tools Analyst IIAuthor Commented:
It is ugly isn't it? To make matters worse, I'm somewhat of a novice and I inherited this code from someone else, which makes me double clueless! :)

Where would your line of script, as well as the mouseout line,  fit into my ugly script?

Thanks,

John

0
 
LordWolfyCommented:
A quick and dirty way to do it is as follows:

1. make a copy of the 2 functions 'MM_swapImgRestore' and 'MM_swapImage' and give them different names (this will allow you to keep the existing funcionality if you desire it)

2. Add this line to the swapimage function:
document.getElementById('header').style.background-image='BluishHeader3.jpg

3. Add this line to the swapimgrestore function:
document.getElementById('header').style.background-image='BluishHeader2.jpg

4. In your HTML, find the elements that you want the new behaviour for and change the OnMouseOver and OnMouseOut values to the names of your corresponding new functions
0
 
RouchieCommented:
Hey John

Can I just clarify what you're trying to do here?  Do you want to simply change the header image when you rollover the header itself?

Or do you want to change the header image AS WELL as change the link image when the mouse hovers over the link?
0
 
RouchieCommented:
Okay I guess you want 2 images to change.  You can define a second function that swaps the header image, then get the hyperlink to fire 2 scripts when the cursor goes in/out, rather than just 1...

Take care that when using XHTML doctypes to specify the hyperlink image properties correctly using CSS and not inline HTML properties (as per my example):
<!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>bed &amp; bath</title>
<script type="text/javascript"> 
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
function setNewHeaderImage(img){
	var header = document.getElementById('header');
	if(header){ // if browser supports getElementById
		header.style.backgroundImage=img;
	}
}
</script>
<style type="text/css">
#container {
        font-family: "Gill Sans MT";
        font-size: 14px;
        margin: 0 auto;
        height: 700px;
        width: 890px;
        margin-top: 20px;
        background-color: #CCCCFF;
}
#header {
 
        height: 100px;
        width: 890px;
        margin: 0 auto;
        background-image: url(images/BluishHeader2.jpg);
}
#gallery {
        background-color: #FFFFFF;
        height: 100px;
        width: 400px;
        margin: 0 auto;
        margin-top: 100px;
}
</style>
</head>
<body onload="MM_preloadImages('images/SonyVaioMini.jpg')">
<div id="header">
</div>
<div id="container">
	<div id="gallery">
		<a href="#" onmouseout="MM_swapImgRestore(); setNewHeaderImage('images/BluishHeader3.jpg');" onmouseover="MM_swapImage('Image1','','images/SonyVaioMini.jpg',1); setNewHeaderImage('images/BluishHeader2.jpg');">
			<img src="images/Playstation.jpg" id="Image1" style="width:96px; height:97px; border:0;" />
		</a>
	</div>
</div>
</body>
</html>

Open in new window

0
 
gabrielPennybackReliability Business Tools Analyst IIAuthor Commented:
I won't have time to try these out til later this afternoon.

In the meantime, LordWolfy, how exactly do I add those lines to the copied renamed functions? This is obviously not it:
function MM_swapImage2() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
   document.getElementById('header').style.background-image='BluishHeader3.jpg;}  
}

Thanks,

John
0
 
gabrielPennybackReliability Business Tools Analyst IIAuthor Commented:
Hi Rouchie,
I tried your code and couldn't get it to work, so maybe I'm phrasing the question wrong. I was intrigued by the fact that when I put in two identical image swap divs, the bottom one made the image change not in itself but in the div above it.  Here's a link to the file:   http://www.designamania.com/Ex-Ex/DJRollover.html

Thanks!

John


0
 
RouchieCommented:
>> the bottom one made the image change not in itself but in the div above it

You cannot have more than one ID on the same page, this will cause errors.  ID values can only be assigned to one object only.  The browser is therefore ignoring the second ID and using the first one as the default.

Here's some amended code that should work in IE
<!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>bed &amp; bath</title>
<script type="text/javascript"> 
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
function setNewHeaderImage(img){
	var header = document.getElementById('header');
	if(header){ // if browser supports getElementById
		header.style.backgroundImage='url('+img+')';
	}
}
</script>
<style type="text/css">
#container {
        font-family: "Gill Sans MT";
        font-size: 14px;
        margin: 0 auto;
        height: 700px;
        width: 890px;
        margin-top: 20px;
        background-color: #CCCCFF;
}
#header {
 
        height: 100px;
        width: 890px;
        margin: 0 auto;
        background-image: url(images/BluishHeader2.jpg);
}
#gallery {
        background-color: #FFFFFF;
        height: 100px;
        width: 400px;
        margin: 0 auto;
        margin-top: 100px;
}
</style>
</head>
<body onload="MM_preloadImages('images/SonyVaioMini.jpg')">
<div id="header">
</div>
<div id="container">
	<div id="gallery">
		<a href="#" onmouseout="MM_swapImgRestore(); setNewHeaderImage('images/BluishHeader3.jpg');" onmouseover="MM_swapImage('Image1','','images/SonyVaioMini.jpg',1); setNewHeaderImage('images/BluishHeader2.jpg');">
			<img src="images/Playstation.jpg" id="Image1" style="width:96px; height:97px; border:0;" />
		</a>
	</div>
</div>
</body>
</html>

Open in new window

0
 
gabrielPennybackReliability Business Tools Analyst IIAuthor Commented:
Hi Rouchie,

I got rid of the extra id and the restore pat of the code works fine if I make a small change in the code (see attached). But on mouseover I get nothing.

Just to recap:
Bluish_Header.jpg is the default background image
Bluish_Header2.jpg is the replacement image.

We're almost there.

Thanks,
John
<!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>bed &amp; bath</title>
<script type="text/javascript"> 
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
function setNewHeaderImage(img){
        var header = document.getElementById('header');
        if(header){ // if browser supports getElementById
                header.style.backgroundImage='url('+img+')';
        }
}
</script>
<style type="text/css">
#container {
	font-family: "Gill Sans MT";
	font-size: 14px;
	margin: 0 auto;
	height: 700px;
	width: 890px;
	margin-top: 20px;
	background-color: #CCCCFF;
	border-top: solid thin #003366;
 
}
#header {
	height: 200px;
	width: 890px;
	margin: 0 auto;
	background-image: url(images/Bluish_Header.jpg);
	background-repeat: no-repeat;
}
#gallery {
        background-color: #FFFFFF;
        height: 100px;
        width: 400px;
        margin: 0 auto;
        margin-top: 100px;
}
</style>
</head>
<body onload="MM_preloadImages('images/SonyVaioMini.jpg')">
<div id="header"></div>
<div id="container">
        <div id="gallery">
        
<a href="#" onmouseout="MM_swapImgRestore(); setNewHeaderImage('images/Bluish_Header.jpg');"
 
onmouseover="MM_swapImage('Image2','','images/SonyVaioMini.jpg',1); setNewHeaderImage('images/BluishHeader2.jpg');">
<img src="images/Playstation.jpg" name="Image2" width="96" height="97" id="Image2" style="width:96px; height:97px; border:0;" /></a>        </div>
</div>
</body>
</html>

Open in new window

0
 
gabrielPennybackReliability Business Tools Analyst IIAuthor Commented:
Here's a link to an abbreviated version of the file I would actually be using this technique in: http://www.discretedata.com/DealTree/CowBoomDev/RandD/SwapUponRollover.html

Thanks,

John
0
 
gabrielPennybackReliability Business Tools Analyst IIAuthor Commented:
Okay, here's a very simple-minded way to approach it.  Would it be possible to take this extremely simple code that produces a background on loading, and convert into an onmouseover command targeting the div "header1"?

    <!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>
    <script language="JavaScript"><!--
    
    function setBackground() {
      if (document.body) {
        alert('here');
        document.body.style.backgroundImage = 'url(bkgrnd_Green.jpg)';
      }
    }
    //--></script>
    </head>
    
    <body onLoad="setBackground()">
    </body>
    </html>

Open in new window

0
 
RouchieCommented:
You don't need to use MM_swapImgRestore because hyperlinks also have an event called onmouseout that you can use to fire the same script I wrote, but instead add the original image to the script resulting in the same functionality as MM_swapImgRestore but with less confusion!

I see in your code that you have hyperlinks to bdichiara's website, so I'm guessing he has helped out earlier?  If so, is the last post what you need?
0
 
bdichiaraCommented:
I helped another user on a different question (http://www.experts-exchange.com/Web_Development/Images/Q_23166993.html).

My answer seemed to fit gabrielPennyback's solution as well.
0
 
gabrielPennybackReliability Business Tools Analyst IIAuthor Commented:
Thanks, Brian. That's exactly it ... and much simpler than all that javascript. Thanks.
0
All Courses

From novice to tech pro — start learning today.