PDA

View Full Version : Control onMouseout image Swap


damien
10-25-2002, 09:50 AM
I have 2 separate image swaps operating on a single image map. One onMouseOver and another onClick. My problem is that onMouseOut I'm calling a function which reverses the image Swap, and I want this to operate on the OnMouseOver imgSwap but NOT the onClick one.

code:
<area alt="" shape="poly" coords="78,28,234,53,230,151,247,153,247,200,238,204,236,269,187,265,180,273,83,246,49,212,28,131,57,36,74,3 9" onMouseOut="MM_swapImgRestore(1)" onMouseOver="MM_swapImage('imgMap','','/futuretense_cs/USA_Images/Western.jpg',1)" onClick="MM_swapImage('imgMap','','/futuretense_cs/USA_Images/backmap.jpg',2),showLayerMap('Wst')">

As the onClick and OnMouseOver operate on the same area the imgSwapRestore() function always operates on the most recent imgSwap, which is always the onClick. I want the onClick imgSwap to stick.

thanks in advance,
damien

Mr J
10-25-2002, 02:59 PM
The following script allows for an image change onmouseover with a different image shown onclick.

The image shown onclick will not change untill another onclick is recieved by a different link

For more information and examples see my site at


www.huntingground.freeserve.co.uk/webplus/buttons/textlink.htm

You should be able to work this in with your existing script


<script language="JavaScript">
var Images = new Array("on.gif","off.gif","onf.gif") // list images to preload
var preloadImages=new Array() // preloads images
for (i=0;i<=Images.length-1;i++) {
preloadImages[i]=new Image()
preloadImages[i].src=Images[i]
}

LastID = ""

function ON(id){
(LastID != id?document[id].src = "yourimageon.gif":"")
}

function OFF(id){
(LastID != id?document[id].src = "yourimageoff.gif":"")
}

function ACTIVE(id){
document[id].src = "yourimageon.gif"
if (LastID != ""){
(LastID != id?document[LastID].src = "yourimageoff.gif":"")
}
LastID = id
}
// -->
</script>


<a href="yourpage.htm" onMouseOver="ON('image1');" onMouseOut="OFF('image1')" onClick="ACTIVE('image1')"><img src="yourimage.gif" border="0" name="image1">Link One</a>

<a href="yourpage.htm" onMouseOver="ON('image2');" onMouseOut="OFF('image2')" onClick="ACTIVE('image2')"><img src="yourimage.gif" border="0" name="image2">Link Two</a>

<a href="yourpage.htm" onMouseOver="ON('image3');" onMouseOut="OFF('image3')" onClick="ACTIVE('image3')"><img src="yourimage.gif" border="0" name="image3">Link Three</a>

damien
10-25-2002, 03:38 PM
thanks I'll give that a lash.
d