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
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 & 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>
and there should be a 3 in there somewhere :p
ASKER
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
Where would your line of script, as well as the mouseout line, fit into my ugly script?
Thanks,
John
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('h
3. Add this line to the swapimgrestore function:
document.getElementById('h
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
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('h
3. Add this line to the swapimgrestore function:
document.getElementById('h
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
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?
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?
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):
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 & 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>
ASKER
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.arg
if ((x=MM_findObj(a[i]))!=nul
document.getElementById('h
}
Thanks,
John
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.arg
if ((x=MM_findObj(a[i]))!=nul
document.getElementById('h
}
Thanks,
John
ASKER
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
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
>> 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
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 & 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>
ASKER
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
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 & 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>
ASKER
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
Thanks,
John
ASKER
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>ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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?
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?
I helped another user on a different question (https://www.experts-exchange.com/questions/23166993/Swap-Background-Image.html).
My answer seemed to fit gabrielPennyback's solution as well.
My answer seemed to fit gabrielPennyback's solution as well.
ASKER
Thanks, Brian. That's exactly it ... and much simpler than all that javascript. Thanks.
The javascript code you will need in order to change the background is as follows:
document.getElementById('h
Your mouseover would trigger this and you woudl have a similar one for your mouseout to set it back to BluishHeader2.jpg