PDA

Click to See Complete Forum and Search --> : one image rollover w/multiple buttons

dd014
12-23-2002, 12:13 PM
Hey everyone,
Can someone give me a script for this type of rollover effect:
(its been asked for in this forum before but I can't find it) :confused:

I want one to have one image with several links around it (or below it)

and I want that one image to change to something different each time the cursor passes over a different link.


I'm a newbie to JS so if possible does someone have the FULL code?

Thanks a lot. :)
pyro
12-23-2002, 12:44 PM
This should do the trick. Just rename the img#_on/off.src="#.gif", and the default image (<img src) to what you need. If you need more than two, just copy what I did. If you can't get it, let me know how many images you need, and I'll whip it up for you.



<html>
<head>
<title>test</title>
<script language=JavaScript>
img1_off=new Image()
img1_off.src="1.gif"
img1_on=new Image()
img1_on.src="2.gif"

img2_on=new Image()
img2_on.src="3.gif"

</script>
</head>
<body>
<img src="1.gif" name="image" border=0>
<A HREF="#" onmouseover="document.image.src=img1_on.src" onmouseout="document.image.src=img1_off.src">one</A>
<A HREF="#" onmouseover="document.image.src=img2_on.src" onmouseout="document.image.src=img1_off.src">two</A>
</body>
</html>
pyro
12-23-2002, 12:59 PM
I noticed a little bug in the code. I edited my above post, and it is correct now.
dd014
12-23-2002, 05:23 PM
I'm gonna try that, thanks

I'm gonna be using three buttons, for the record.

But I will go try and figure it out now...I'm just a little confused b/c for my plain button rollovers i used a slightly different script, but I'm sure I'll figure it out.

Thanks again :)
dd014
12-23-2002, 06:44 PM
I haven't actually tried the script yet...but maybe I can ask you a question

the reason i need this code is b/c im posting a pic of a square-shaped painting i did, which can be rotated, and interpreted from the 4 different angles

so..in short...there is not point for me to have links there cos i just want the image to change to a rotated version w/each rollover

can u or anyone suggest a better way to do this w/out the use of links since they wont link to anything..

thanks
swon
12-23-2002, 06:59 PM
Try this code:

<html>
<head>
<title></title>
<script language="JavaScript">
<!--
function changePic(number)
{
//number is the string from the div's below, for example the first is 0
var image_new = new Array("new.jpg","mysecond.jpg","mythird.jpg"); // your defined images
document.images["MyPic"].src = image_new[number];
// image_new[number] means the image in the array.
}
//-->
</script>
</head>
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">
<table border="0" align=center>
<tr>
<td><img src="test.jpg" width="200" height="200" border=1 name="MyPic"></td>
</tr>
<tr>
<td nowrap>
<div onMouseover="changePic('0')">First Change</div>
<div onMouseover="changePic('1')">second Change</div>
<div onMouseover="changePic('2')">third Change</div>
</td>
</tr>
</table>
</body>
</html>
dd014
12-23-2002, 07:11 PM
boy i feel dense reading that :rolleyes: lol
i'm gonna try that

thanks:)
dd014
12-23-2002, 07:15 PM
could i actually ask u to help me out:

(i'm just REALLY unfamiliar w/java script)

my main image is call u1.jpg
and u2.jpg, u3.jpg, u4.jpg are the 3 i want the first to change to

i'm not quite sure where to insert the image files...

:confused:
swon
12-23-2002, 07:20 PM
here comes the changed script:

<html>
<head>
<title></title>
<script language="JavaScript">
<!--
function changePic(number)
{
//number is the string from the div's below, for example the first is 0
var image_new = new Array("u2.jpg","u3.jpg","u4.jpg"); // your defined images
document.images["MyPic"].src = image_new[number];
// image_new[number] means the image in the array.
}
//-->
</script>
</head>
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">
<table border="0" align=center>
<tr>
<td><img src="u1.jpg" width="200" height="200" border=1 name="MyPic"></td>
</tr>
<tr>
<td nowrap>
<div onMouseover="changePic('0')">First Change</div>
<div onMouseover="changePic('1')">second Change</div>
<div onMouseover="changePic('2')">third Change</div>
</td>
</tr>
</table>
</body>
</html>
dd014
12-23-2002, 07:52 PM
hey thanks! that worked perfectly...except when i tried to add a 4th image (i decided to make 4) it didnt work...im not sure why, cos i dont really understand js all that well
swon
12-23-2002, 07:58 PM
if you want to have more images you must put the new image at the end of the array -->

var image_new = new Array("u2.jpg","u3.jpg","u4.jpg","here ");

and make a new div in the body-->

<div onMouseover="changePic('2')">third Change</div>

---- don't forget the number changePic('3') or 4 or.....

Hope that helps you!
dd014
12-23-2002, 08:01 PM
thanks a lot! that worked perfectly

i did do that originally but along the way i messed something up so none of the rollovers worked


thanks again :)