Mouseover effect that changes 2 other images

**Jason** · 05-07-2005, 02:29 AM

Hello I currently have a mouse over effect on my website. When the mouse scrolls over my menu button which is hyper-linked to another page, the button changes to a lighter button.

What I would like to have happen is when a person scrolls over the button it changed the button AND two pictures on either side of the button. I want to use this effect to give a visual example of the information the link holds.

So far I am using this script ( by chris poole, I edited the title info for space reason in this thread)

function init() {
if (!document.getElementById) return
var imgOriginSrc;
var imgTemp = new Array();
var imgarr = document.getElementsByTagName('img');
for (var i = 0; i < imgarr.length; i++) {
if (imgarr[i].getAttribute('hsrc')) {
imgTemp[i] = new Image();
imgTemp[i].src = imgarr[i].getAttribute('hsrc');
imgarr[i].onmouseover = function() {
imgOriginSrc = this.getAttribute('src');
this.setAttribute('src',this.getAttribute('hsrc'))
}
imgarr[i].onmouseout = function() {
this.setAttribute('src',imgOriginSrc)
}
}
}
}
onload=init;

</script>

<a href="webpagetobelinked.html">
<img border="0" src="./location/normalbuttonpicture.gif" hsrc="./location/secondbuttontobeusedformouseovereffect.gif" width="220" height="35" alt="Click Here Info"></a><br>

I tried a few things now but get errors. Could one of you please edit this code so it includes altering two other pictures when the mouse over alters the button. Thanks for any help you can offer, its trully appreiated.

**jscheuer1** · 05-07-2005, 06:30 AM

It would had to have been easier to just create local rollovers to accomplish this but, here it is, hopefully you can follow it. There are two examples in the body. The script needs no editing. Works in IE6, NS7.2 and FF1.0.3. I made the links href=# just for testing, set them to whatever pages you like. The name attribute had to be used for the rollover's source in places due to limitations in Mozilla. Unique id's that agree with front and back attributes are required, as shown.

HTML Code:

<html>
<head>
<title>Rollover w/multiple image changes - Demo</title>
<script type="text/javascript">
function init() {
if (!document.getElementById) return
var imgOriginSrc, imgOriginSrcb4, imgOriginSrcaf;
var imgTemp = new Array();
var imgarr = document.getElementsByTagName('img');
for (var i = 0; i < imgarr.length; i++) {
if (imgarr[i].getAttribute('hsrc')) {
imgTemp[i] = new Image();
imgTemp[i].src = imgarr[i].getAttribute('hsrc');
imgarr[i].onmouseover = function() {
imgOriginSrc = this.getAttribute('src');
imgOriginSrcb4 = document.getElementById(this.getAttribute('front')).src;
imgOriginSrcaf = document.getElementById(this.getAttribute('back')).src;
document.getElementById(this.getAttribute('front')).src=document.getElementById(this.getAttribute('front')).name
document.getElementById(this.getAttribute('back')).src=document.getElementById(this.getAttribute('back')).name
this.setAttribute('src',this.getAttribute('hsrc'))
}
imgarr[i].onmouseout = function() {
this.setAttribute('src',imgOriginSrc)
document.getElementById(this.getAttribute('front')).src=imgOriginSrcb4
document.getElementById(this.getAttribute('back')).src=imgOriginSrcaf
}
}
}
}
onload=init;
</script>
</head>
<body><img id="b41" border="0" src="photo1.jpg" name="photo2.jpg" width="140" height="225" alt="">
<a href="#"> 
<img border="0" front="b41" back="af1" src="thumb1.jpg" hsrc="thumb2.jpg" width="50" height="50" alt="Click Here Info"></a>
<img border="0" id="af1" src="photo3.jpg" name="photo4.jpg" width="140" height="225" alt=""><br>
<img border="0" id="b42" src="photo5.jpg" name="photo6.jpg" width="140" height="225" alt="">
<a href="#"> 
<img border="0" front="b42" back="af2" src="thumb3.jpg" hsrc="thumb4.jpg" width="50" height="50" alt="Click Here Info"></a>
<img border="0" id="af2" src="photo7.jpg" name="photo8.jpg" width="140" height="225" alt=""><br>
</body>
</html>

**Jason** · 05-08-2005, 02:30 AM

This is very helpfull thank you. i just have a few questions I am hoping you can help me with.

Ok the way it is set up right now when I do a mouseover on first button it changes two thumbnail pics to either side of the button.

When i go to the second button below the first button and I do a mouseover it changes the two thumbnails on either side of the second button.

So far each button has two thumbnail pics beside them. SO the more buttons the more thumbnail pics.

Would it be possible to have two thumb nails for all the buttons and have the buttons alter those two thumbnails? So button one would alter the thumbnails to a picture of a car, button two would alter the thumbnails to pictures of a bike etc. This way I can add more than two buttons (5 in total) and still only have two thumbnail pics on the screen at a time. It would resemble this layout below

thumbnail.......................Thumbnail

................BUTTON ONE
................BUTTON TWO
................BUTTON Three
................BUTTON Four
................BUTTON FIve

instead of the way it is now.

thumbnail...button one.....thumbnail
thumbnail...button two.....thumbnail
thumbnail...button three...thumbnail
thumbnail...button four.....thumbnail
thumbnail...button five.....thumbnail

Thanks for your help.

**jscheuer1** · 05-08-2005, 04:52 AM

Before I go publishing any more code for this, what exactly do you want? I think I get the layout:

Picture 1_________________Picture 2

_ _____ ____Button 1
___ __ _____Button 2
_ _____ ____Button 3
___ _____ __Button 4
___ ___ ____Button 5

Right?

Now, what do you want to happen at crucial points in the page's use?

Why not draw up a plan for me to follow? Like this but, use the actual image names:

After page is fully loaded:

Picture 1 is image1.jpg, Picture 2 is image2.jpg, Button 1 is imageB1.jpg, Button 2 is imageB1.jpg etc.
(do all the buttons for this part)

_______________________

When Button 1 is hovered:

Picture 1 is image1a.jpg Picture 2 is image1a.jpg, Button 1 is imageB2.jpg
(this is enough for this part but, do it also for Button 2)

_____________________________

When Button 1 is no longer hovered but, no new Button is hovered:
Picture 1 is image1.jpg, Picture2 is image2.jpg, Button 1 is imageB1.jpg
(this is enough for this part but, do it also for Button 2)

_____________________________

Once I have all that information, I can make up something to do it.

**jscheuer1** · 05-08-2005, 06:52 AM

Hmmm, it seems all I needed to do was write that last post to figure out that the following setup should take care of all possible configurations that fit your basic idea, so unless it still won't work for you, you can forget the outline I mentioned above. Here it goes, I think the two examples should be explanation enough once you see it in action:

HTML Code:

<html>
<head>
<title>Rollover w/multiple image changes - Demo</title>
<script type="text/javascript">
function init() {
if (!document.getElementById) return
var imgOriginSrc, imgOriginSrcb4, imgOriginSrcaf;
var imgTempa = new Array();
var imgTempb = new Array();
var imgTemp = new Array();
var imgarr = document.getElementsByTagName('img');
for (var i = 0; i < imgarr.length; i++) {
if (imgarr[i].getAttribute('hsrc')) {
if (imgarr[i].getAttribute('aname')) {
imgTempa[i] = new Image();
imgTempa[i].src = imgarr[i].getAttribute('aname');
}
if (imgarr[i].getAttribute('bname')) {
imgTempb[i] = new Image();
imgTempb[i].src = imgarr[i].getAttribute('bname');
}
imgTemp[i] = new Image();
imgTemp[i].src = imgarr[i].getAttribute('hsrc');
imgarr[i].onmouseover = function() {
imgOriginSrc = this.getAttribute('src');
imgOriginSrcb4 = document.getElementById(this.getAttribute('front')).src;
imgOriginSrcaf = document.getElementById(this.getAttribute('back')).src;
document.getElementById(this.getAttribute('front')).src=this.getAttribute('aname')
document.getElementById(this.getAttribute('back')).src=this.getAttribute('bname')
this.setAttribute('src',this.getAttribute('hsrc'))
}
imgarr[i].onmouseout = function() {
this.setAttribute('src',imgOriginSrc)
document.getElementById(this.getAttribute('front')).src=imgOriginSrcb4
document.getElementById(this.getAttribute('back')).src=imgOriginSrcaf
}
}
}
}
onload=init;
</script>
</head>
<body>
<table cellspacing="5">
<tr>
    <td><img id="b41" border="0" src="photo1.jpg" width="140" height="225" alt="">
</td><td width="150"></td>
    <td><img border="0" id="af1" src="photo2.jpg" width="140" height="225" alt="">
</td></tr><tr>
    <td colspan="3" align=center><a href="#"> 
<img border="0" front="b41" back="af1" aname="photo3.jpg" bname="photo4.jpg" src="thumb1.jpg" hsrc="thumb2.jpg" width="50" height="50" title="Click Here Info"></a>
</td></tr><tr>
    <td colspan="3" align=center><a href="#"> 
<img border="0" front="b41" back="af1" aname="photo5.jpg" bname="photo6.jpg" src="thumb3.jpg" hsrc="thumb4.jpg" width="50" height="50" title="Click Here Info"></a>
</td></tr></table></body></html>

**Jason** · 05-08-2005, 04:41 PM

PERFECT!!

John, I just want to say, some of us people who are trying to learn and understand this stuff really do appreciate people like you. Its people like you that help us through our moments of utter coding frustration with little to no reward for yourselves. It is much appreciated I assure you and hopefully I can in some similar form pass my good fortune on to others as you have done here. John, thank you so much for all your help.

Thread: Mouseover effect that changes 2 other images

Thread Tools

Search Thread

Mouseover effect that changes button and 2 other images

Bookmarks

Bookmarks

Posting Permissions