PDA

View Full Version : targetting rollover images

Squills
08-09-2002, 04:24 PM
Hi
I'm sure this is very basic but I'm pretty new to JavaScript.

I can cope with simple rollovers but what I want to do is when I roll over an image, I want an image elsewhere on my page to change.

eg. roll over image 1; image 2 changes. roll off image 1; image 2 changes back.

Any help would be greatly appreciated.
thx.
requestcode
08-09-2002, 04:30 PM
Here is a example of one way you could do it if you only want to swap the second image. Just pass the image you want to swap to and the name of the img tag.
<html>
<head>
<title>Multi Image Flip</title>
<SCRIPT LANGUAGE="JavaScript">
function swap(image,imgname)
{
eval("document."+imgname+".src=image")
}
</SCRIPT>
</head>
<body>
<CENTER>
<BR>
<BR>
<A HREF="page.html" onMouseOver="swap('3.gif','img2')" onMouseOut="swap('2.gif','img2')"><IMG SRC="1.gif" NAME="img1" BORDER="0"></A><br>
<A HREF="page.html"><IMG SRC="2.gif" NAME="img2" BORDER="0"></A><br>
</body>
</html>
mhere
08-10-2002, 07:40 AM
well, try this!!

this will help swapping both images from each other:

<html>
<head>
<script language=javascript>
function swap(image_id,image_src)
{
image_id.src=image_src;
}
</script>
</head>
<body>

<img id="img1" src="1.jpg" onmouseover="swap(img2,'2_on.jpg')" onmouseout="swap(img2,'2.jpg')">

<img id="img2" src="2.jpg" onmouseover="swap(img1,'1_on.jpg')" onmouseout="swap(img1,'1.jpg')">

</body>
</html>

please tel me if it solves ur prob..

aakif.
Lukifer
08-12-2002, 09:36 PM
The first two responses to the original post were both very helpful, but not quite what I need...

I'd like to find a way for one rollover/hyperlink to be able to change two images on the page at once... itself, and another image.

ie: mouseover the hyperlink, and the link image changes, as does the main image on the page.

I hope this made sense... I've only started working with Java today, and so far I've managed to figure out how to change the link itself or the main image, but not at the same time.

help?:confused:

-Lucas
Lukifer
08-12-2002, 10:53 PM
:thumbsup:
Well, all I can say is WOW. Thanks to the two previous posts, I was able to see what I was doing wrong, and now it is working!

Thanks for everyone on the list!

-Luke