[AccessGuy]

This has been frustrating! I need one mouse-over event to change two pictures. I can make it change it's own picture, but how do I add a 2nd mouseover event to the same routine to change a different picture?

Explanation (i.e.):

Show 4 pics, along with a 5th pic (or, ideally, replace text)

pic1 pic2 pic3 pic4 picA OR textA

when you mouseover pic1, it changes to AltPic1 AND picA also changes to AltPicA (or TextA)

when you mouseover pic2, it changes to AltPic2 AND picA also changes to AltPicB (or TextB)

Hope it makes sense.

[Darkness22k]

Shouldn't this be in the Javascript forum?

[Tesco]

I'm not really a Javascript merchant by any means, but, can't you just make a function (one for each pic1 and pic2) and then call it at onMouserOver?

[Skeleton Man]

Try this, it changes 2 images on mouse over, and changes them back when the mouse is moved off:

<script language="Javascript">
function change_img()
{
document.images.img1.src = "image3.gif";
document.images.img2.src = "image4.gif";
}

function change_back()
{
document.images.img1.src = "image1.gif";
document.images.img2.src = "image2.gif";
}
</script>
<a href="#" onMouseover="change_img()" onMouseout="change_back()">Mouse here to change images</a>


(You will of course need to put in the 2 images somewhere, named img1 and img2.. e.g. <img name="img1" src="image1.gif">)

[BuellBoy]

Hmm, This is helpful to me too, but how would i get one image to change to different pictures according to wich image the mouse is on?

[whiteraider]

Below is a script that I use to create a UK map (England is split across 3 images) that highlights the country that you have moused over ( the page the script is taken from:
Nav list)


This script goes into the head for the page and preloads all the images
<script language="Javascript">
EngnormalImg= new Image();
EngnormalImg.src= 'images/UK_Map/englebw.jpg';
EngnormalImg2=new Image();
EngnormalImg2.src= 'images/UK_Map/englnbw.jpg';
EngnormalImg3=new Image();
EngnormalImg3.src= 'images/UK_Map/englsbw.jpg';

WalnormalImg= new Image();
WalnormalImg.src= 'images/UK_Map/walbw.jpg';

SconormalImg= new Image();
SconormalImg.src= 'images/UK_Map/scotbw.jpg';

EnghiddenImg= new Image();
EnghiddenImg.src= 'images/UK_Map/engle.jpg';
EnghiddenImg2=new Image();
EnghiddenImg2.src= 'images/UK_Map/englnc.jpg';
EnghiddenImg3=new Image();
EnghiddenImg3.src= 'images/UK_Map/engls.jpg';

WalhiddenImg= new Image();
WalhiddenImg.src= 'images/UK_Map/wal.jpg';

ScohiddenImg= new Image();
ScohiddenImg.src= 'images/UK_Map/scotc.jpg';

function EnglandOver()
{
WalesOut();
ScotlandOut();
document.UK_Map3.src=EnghiddenImg.src;
document.UK_Map4.src=EnghiddenImg2.src;
document.UK_Map5.src=EnghiddenImg3.src;
}

function EnglandOut()
{
document.UK_Map3.src=EngnormalImg.src;
document.UK_Map4.src=EngnormalImg2.src;
document.UK_Map5.src=EngnormalImg3.src;
}

function EnglandLink()
{
url = '/England/index.php'
parent.location.href= url
}

function WalesOver()
{
ScotlandOut();
EnglandOut();
document.UK_Map2.src=WalhiddenImg.src;
}

function WalesOut()
{
document.UK_Map2.src=WalnormalImg.src;
}

function WalesLink()
{
url = '/Wales/index.php'
parent.location.href= url
}

function ScotlandOver()
{
EnglandOut();
WalesOut();
document.UK_Map1.src=ScohiddenImg.src;
}

function ScotlandOut()
{
document.UK_Map1.src=SconormalImg.src;
}

function ScotlandLink()
{
url = '/Scotland/index.php'
parent.location.href= url
}
</script>

In the body of your page
<a id='Scotland' name='Scotland' onclick='ScotlandOver()' ondblclick='ScotlandLink()'><!--onMouseOut=ScotlandOut()-->
<img src='images/UK_Map/scotbw.jpg' name='UK_Map1' alt='Scotland - Link to mountains, routes, climbs, etc' border='0' width='173' height='111' /></a>
<a id='Wales' name='Wales' onclick='WalesOver()' ondblclick='WalesLink()'><!--onMouseOut=WalesOut()-->
<img src='images/UK_Map/walbw.jpg' name='UK_Map2' alt='Wales - Link to mountains, routes, climbs, etc' border='0' width='118' height='47' />
</a>
<a id='England' name='England' onclick='EnglandOver()' ondblclick='EnglandLink()'><!--onMouseOut='EnglandOut()'-->
<img src='images/UK_Map/englebw.jpg' name='UK_Map3' alt='England - Link to mountains, routes, climbs, etc' border='0' width='58' height='118' />
</a>
<a id='England1' name='England1' onclick='EnglandOver()' ondblclick='EnglandLink()'><!--onMouseOut='EnglandOut()'-->
<img src='images/UK_Map/englnbw.jpg' name='UK_Map4' border='0' alt='England - Links to mountains, routes, climbs, etc' width='120' height='27' />
</a>
<a id='England2' name='England2' onclick='EnglandOver()' ondblclick='EnglandLink()'><!--onMouseOut='EnglandOut()'-->
<img src='images/UK_Map/englsbw.jpg' name='UK_Map5' border='0' alt='England - Links to mountains, routes, climbs, etc' width='118' height='35' />
</a>


Hope this helps...