Tek-Tips is the largest IT community on the Internet today!
Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!
-
Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!
multi image rollovers
- Thread starter mleahy
- Start date
BillyRayPreachersSon
Programmer
Marie,
This will do the trick:
When you roll over the first image, both images will change.
I hope this helps!
Dan
This will do the trick:
Code:
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
function changeImages()
{
document.getElementById('firstImage').src = 'imageA_Rollver.gif';
document.getElementById('secondImage').src = 'imageB_Rollver.gif';
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<IMG SRC="a.gif" onMouseOver="changeImages();" ID="firstImage">
<IMG SRC="b.gif" ID="secondImage">
</BODY>
</HTML>When you roll over the first image, both images will change.
I hope this helps!
Dan
- Thread starter
- #3
BillyRayPreachersSon
Programmer
Marie,
The following adds rolloff functionality:
Code:
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
function changeImages(rolledOn)
{
if (rolledOn)
{
document.getElementById('firstImage').src = 'imageAon.gif';
document.getElementById('secondImage').src = 'imageBon.gif';
}
else
{
document.getElementById('firstImage').src = 'imageA.gif';
document.getElementById('secondImage').src = 'imageB.gif';
}
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<IMG SRC="imageA.gif" onMouseOver="changeImages(true);" onMouseOut="changeImages(false);" ID="firstImage">
<IMG SRC="imageB.gif" ID="secondImage">
</BODY>
</HTML>I tested the code, and it works fine in: IE 6, NN 7.1, Opera 7.21, and Mozilla 1.5.
What version of NN were you testing? Maybe 4.x, or something old like that?
Hope this code helps!
Dan
- Thread starter
- #5
Hi Dan,
Thanks for your help last week - much appreciated. Just wondered how I would get the code to work on a couple of image in the one window. Maybe I am doing something wrong but when I rollover one image it effects everything and I wanted to have a couple of separate multi-image rollovers. What could I be doing wrong?
<SCRIPT LANGUAGE="JavaScript">
<!--
function changeImages(rolledOn)
{
if (rolledOn)
{
document.getElementById('pic_about').src = 'img/pic_about_inv.jpg';
document.getElementById('button').src = 'img/hm_about.gif';
}
else
{
document.getElementById('pic_about').src = 'img/pic_about.jpg';
document.getElementById('button').src = 'img/x.gif';
}
}
//-->
<!--
function changeImages(rolledOn)
{
if (rolledOn)
{
document.getElementById('pic_rescampus').src = 'img/pic_rescampus_inv.jpg';
document.getElementById('button').src = 'img/hm_rescampus.gif';
}
else
{
document.getElementById('pic_rescampus').src = 'img/pic_rescampus.jpg';
document.getElementById('button').src = 'img/x.gif';
}
}
//-->
</SCRIPT>
Should what I am doing work.
Sorry to be a pest.
Marie
Thanks for your help last week - much appreciated. Just wondered how I would get the code to work on a couple of image in the one window. Maybe I am doing something wrong but when I rollover one image it effects everything and I wanted to have a couple of separate multi-image rollovers. What could I be doing wrong?
<SCRIPT LANGUAGE="JavaScript">
<!--
function changeImages(rolledOn)
{
if (rolledOn)
{
document.getElementById('pic_about').src = 'img/pic_about_inv.jpg';
document.getElementById('button').src = 'img/hm_about.gif';
}
else
{
document.getElementById('pic_about').src = 'img/pic_about.jpg';
document.getElementById('button').src = 'img/x.gif';
}
}
//-->
<!--
function changeImages(rolledOn)
{
if (rolledOn)
{
document.getElementById('pic_rescampus').src = 'img/pic_rescampus_inv.jpg';
document.getElementById('button').src = 'img/hm_rescampus.gif';
}
else
{
document.getElementById('pic_rescampus').src = 'img/pic_rescampus.jpg';
document.getElementById('button').src = 'img/x.gif';
}
}
//-->
</SCRIPT>
Should what I am doing work.
Sorry to be a pest.
Marie
BillyRayPreachersSon
Programmer
Marie,
Yes - it probably wouldn't work... You can't have 2 functions with the same name, as the browser gets confused about which one to run.
The following code should do the trick for you. It may not be the most efficient way of handling rollovers, but it's probably easier to understand than others - which probably makes it easier for you or others to add more images to if desired.
Here's the code:
Code:
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
function changeImages(imageObj, rolledOn)
{
if (imageObj.id == 'pic_about')
{
if (rolledOn)
{
imageObj.src = 'img/pic_about_inv.jpg';
document.getElementById('button').src = 'img/hm_about.gif';
}
else
{
imageObj.src = 'img/pic_about.jpg';
document.getElementById('button').src = 'img/x.gif';
}
}
if (imageObj.id == 'pic_rescampus')
{
if (rolledOn)
{
imageObj.src = 'img/pic_rescampus_inv.jpg';
document.getElementById('button').src = 'img/hm_rescampus.gif';
}
else
{
imageObj.src = 'img/pic_rescampus.jpg';
document.getElementById('button').src = 'img/x.gif';
}
}
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<IMG SRC="img/pic_about.jpg" onMouseOver="changeImages(this, true);" onMouseOut="changeImages(this, false);" ID="pic_about">
<IMG SRC="img/pic_rescampus.jpg" onMouseOver="changeImages(this, true);" onMouseOut="changeImages(this, false);" ID="pic_rescampus">
<IMG SRC="img/x.gif" ID="button">
</BODY>
</HTML>Hope this helps!
Dan
- Status
Similar threads
- Locked
- Question
- Locked
- Question
- Locked
- Question