Preserved Topic: Changing multiple graphics with a rollover. (Page 1 of 1) $Pages that link to <a href="https://ozoneasylum.com/backlink?for=17818" title="Pages that link to Preserved Topic: Changing multiple graphics with a rollover. (Page 1 of 1)" rel="nofollow" >Preserved Topic: Changing multiple graphics with a rollover. <span class="small">(Page 1 of 1)</span>\$

Adrobeast Obsessive-Compulsive (I) Inmate From: Insane since: Aug 2000	posted 08-04-2000 20:36 Anyone have a javascript that will allow me to change the state of two graphics when you roll over one of them? I want to have buttons that change, and then a different image that explains each one. Can anyone help? "Eat Cheese, Cheese is good." -Adrobeast
jiblet Paranoid (IV) Inmate From: Minneapolis, MN, USA Insane since: May 2000	posted 08-04-2000 20:58 Yeah, DocOzone's script is perfect for this. It's an amazingly simple yet powerful script, so it might take a minute to wrap your brain around if you're not familiar with programming concepts.
Adrobeast Obsessive-Compulsive (I) Inmate From: Insane since: Aug 2000	posted 08-04-2000 21:48 The one in the handson section? Can you tell me how to get that to do multiple switches? Also, I need the second graphic to chagne into 4 different ones. "Eat Cheese, Cheese is good." -Adrobeast [Edit: Typos] [This message has been edited by Adrobeast (edited 04-08-2000).]
bitdamaged Maniac (V) Mad Scientist From: 100101010011 <-- right about here Insane since: Mar 2000	posted 08-04-2000 22:33 Okay if you have Docs script doing the rollovers then you can add a couple of lines to do this. Here is one way: <SCRIPT LANGUAGE="JavaScript"> <!--DocOzone's Javascript code, copyright 1998 // Feel free to borrow and modify this code, // but be sure leave this credit in the source! // Your pal, -Dr. Thaddeus Ozone- // .http://www.ozones.com/ window.onerror=null; // that was to turn off error reporting... if (document.images) { /* Okay we need to preload our images for the over states of the single image we are going to change. You said there was 4 states so we are going with that */ imageover = new Array(); for (j=0;j<=4;j++){ imageover[j] = new Image(); } // Now we need our 5 images (1 defualt and the 4 over states imageover[1].src = '/default.gif' imageover[2].src = '/over1.gif' imageover[3].src = '/over2.gif' imageover[4].src = '/over3.gif' imageover[5].src = '/over4.gif' names = new Array( "zero" , "one" ); buttons = new Array(4); for (m=0; m<=7; m++) { buttons[m] = new Image(); } buttons[0].src = "zeroA.jpg"; buttons[1].src = "oneA.jpg"; buttons[2].src = "zeroB.jpg"; buttons[3].src = "oneB.jpg"; } // now we change this to do 2 things at once function swap(des,num,mainNum) { if (document.images) { document.images[names[des]].src = buttons[num].src; // add the if statement so this doesn't cause anyproblems if used elsewhere if (mainNum) {document.main.src = imageover[mainNum].src} }} // close the comment tag, this hides the script from really old browsers! --> </SCRIPT> Okay now when you write your links they should look like this: <a href="http://www.handson.nu" onMouseover="swap(0,1,1)" onMouseout="swap(0,0,0)"> where the third number is the number of the image you want the main to be. (0 = defualt, 1 = over1, 2=over2 etc). Lemme know if you have questions Walking the Earth like Kane [This message has been edited by bitdamaged (edited 04-08-2000).] [This message has been edited by bitdamaged (edited 04-08-2000).]
Adrobeast Obsessive-Compulsive (I) Inmate From: Insane since: Aug 2000	posted 08-04-2000 22:35 Thanks a lot, I udnerstand how that works now :-)
Adrobeast Obsessive-Compulsive (I) Inmate From: Insane since: Aug 2000	posted 08-04-2000 23:01 Okay one mroe question. I've got the script set up like this to test my understanding. Unfortunetly, it doesn't work. Can someone tell me why? <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta name="Author" content="Adrian Bettridge"> <meta name="GENERATOR" content="Mozilla/4.73 [en] (Win98; U) [Netscape]"> <title>Adrian Bettridge, Professional Cellist</title> <SCRIPT LANGUAGE="JavaScript"> <!--DocOzone's Javascript code, copyright 1998 // Feel free to borrow and modify this code, // but be sure leave this credit in the source! // Your pal, -Dr. Thaddeus Ozone- // .http://www.ozones.com/ window.onerror=null; // that was to turn off error reporting... if (document.images) { /* Okay we need to preload our images for the over states of the single image we are going to change. You said there was 4 states so we are going with that */ imageover = new Array(); for (j=0;j<=4;j++){ imageover[j] = new Image(); } // Now we need our 5 images (1 defualt and the 4 over states imageover[1].src = '2-2-0.jpg' imageover[2].src = '2-2-1.jpg' imageover[3].src = '2-2-2.jpg' imageover[4].src = '2-2-3.jpg' imageover[5].src = '2-2-4.jpg' names = new Array( "zero" , "one" , "two" , "three" , "four"); buttons = new Array(4); for (m=0; m<=7; m++) { buttons[m] = new Image(); } buttons[0].src = "1-2-1-0.jpg"; buttons[1].src = "1-2-1-1.jpg"; buttons[2].src = "1-2-2-0.jpg"; buttons[3].src = "1-2-2-1.jpg"; buttons[4].src = "1-2-3-0.jpg"; buttons[5].src = "1-2-3-1.jpg"; buttons[6].src = "2-2-1-0.jpg"; buttons[7].src = "2-2-1-1.jpg"; } // now we change this to do 2 things at once function swap(des,num,mainNum) { if (document.images) { document.images[names[des]].src = buttons[num].src; // add the if statement so this doesn't cause anyproblems if used elsewhere if (mainNum) {document.main.src = imageover[mainNum].src} }} // close the comment tag, this hides the script from really old browsers! --> </SCRIPT> </head> <center><table BORDER=0 CELLSPACING=0 CELLPADDING=0 > <tr> <td><img SRC="1-1-0.jpg" height=301 width=401></td> <td> <table BORDER=0 CELLSPACING=0 CELLPADDING=0 COLS=1 WIDTH="100%" HEIGHT="100%" > <tr> <td><a href="personal.html" onMouseover="swap(0,2,1)" onMouseout="swap(0,0,0)"><img SRC="1-2-1-0.jpg" height=100 width=400 border=0 name="zero"></a></td> </tr> <tr> <td><img SRC="1-2-2-0.jpg" height=100 width=400></td> </tr> <tr> <td><img SRC="1-2-3-0.jpg" height=101 width=400></td> </tr> </table> </td> </tr> <tr> <td><img SRC="2-1-0.jpg" height=200 width=400 name="zero"></td> <td> <table BORDER=0 CELLSPACING=0 CELLPADDING=0 COLS=1 WIDTH="100%" HEIGHT="100%" > <tr> <td><img SRC="2-2-1-0.jpg" height=100 width=400></td> </tr> <tr> <td><img SRC="2-2-2.jpg" height=100 width=400></td> </tr> </table> </td> </tr> </table></center> </body> </html> "Eat Cheese, Cheese is good." -Adrobeast [This message has been edited by Adrobeast (edited 04-08-2000).]
bitdamaged Maniac (V) Mad Scientist From: 100101010011 <-- right about here Insane since: Mar 2000	posted 08-04-2000 23:49 Yup it's the name of the image you want to change. I hard coded the name of the image into the swap function (soory should have mentioned it). so there is the line that looks like this: if (mainNum) {document.main.src = imageover[mainNum].src} You need to change "main" to the name of the image you want to change. remember all the images you want to swap must have a name otherwise the script doesn't know what image to change. I think (not sure but it looks right) the image you want to change is 1-1-0.jpg? you can either actually name this "main" or name it whatever you want and then change the function to reflect that. cool? Walking the Earth like Kane
Adrobeast Obsessive-Compulsive (I) Inmate From: Insane since: Aug 2000	posted 08-05-2000 19:19 So, I replace every instance of main with 2-1-0.jpg? That's the image being changed. The buttons then also chagne, which isn't working either. "Eat Cheese, Cheese is good." -Adrobeast
bitdamaged Maniac (V) Mad Scientist From: 100101010011 <-- right about here Insane since: Mar 2000	posted 08-05-2000 20:50 Not quite, its not the actual name of the image (2-1-0.jpg) you need to name the images in your image tags. Like this: <IMG SRC="2-1-0.jpg" NAME="MAIN"> Walking the Earth like Kane

Preserved Topic: Changing multiple graphics with a rollover. (Page 1 of 1) $Pages that link to <a href="https://ozoneasylum.com/backlink?for=17818" title="Pages that link to Preserved Topic: Changing multiple graphics with a rollover. (Page 1 of 1)" rel="nofollow" >Preserved Topic: Changing multiple graphics with a rollover. <span class="small">(Page 1 of 1)</span>\$

Adrobeast
Obsessive-Compulsive (I) Inmate

From:
Insane since: Aug 2000

posted 08-04-2000 20:36

Anyone have a javascript that will allow me to change the state of two graphics when you roll over one of them? I want to have buttons that change, and then a different image that explains each one. Can anyone help?

"Eat Cheese, Cheese is good."
-Adrobeast

jiblet
Paranoid (IV) Inmate

From: Minneapolis, MN, USA
Insane since: May 2000

posted 08-04-2000 20:58

Yeah, DocOzone's script is perfect for this. It's an amazingly simple yet powerful script, so it might take a minute to wrap your brain around if you're not familiar with programming concepts.

Adrobeast
Obsessive-Compulsive (I) Inmate

From:
Insane since: Aug 2000

posted 08-04-2000 21:48

The one in the handson section?

Can you tell me how to get that to do multiple switches?

Also, I need the second graphic to chagne into 4 different ones.

"Eat Cheese, Cheese is good."
-Adrobeast

[Edit: Typos]

[This message has been edited by Adrobeast (edited 04-08-2000).]

bitdamaged
Maniac (V) Mad Scientist

From: 100101010011 <-- right about here
Insane since: Mar 2000

posted 08-04-2000 22:33

Okay if you have Docs script doing the rollovers then you can add a couple of lines to do this. Here is one way:
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>

Okay now when you write your links they should look like this:
<a href="http://www.handson.nu" onMouseover="swap(0,1,1)" onMouseout="swap(0,0,0)">

where the third number is the number of the image you want the main to be. (0 = defualt, 1 = over1, 2=over2 etc).

Lemme know if you have questions

Walking the Earth like Kane

[This message has been edited by bitdamaged (edited 04-08-2000).]

[This message has been edited by bitdamaged (edited 04-08-2000).]

Adrobeast
Obsessive-Compulsive (I) Inmate

From:
Insane since: Aug 2000

posted 08-04-2000 22:35

Thanks a lot, I udnerstand how that works now :-)

Adrobeast
Obsessive-Compulsive (I) Inmate

From:
Insane since: Aug 2000

posted 08-04-2000 23:01

Okay one mroe question. I've got the script set up like this to test my understanding. Unfortunetly, it doesn't work. Can someone tell me why?

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Author" content="Adrian Bettridge">
<meta name="GENERATOR" content="Mozilla/4.73 [en] (Win98; U) [Netscape]">
<title>Adrian Bettridge, Professional Cellist</title>

<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
</head>

<center><table BORDER=0 CELLSPACING=0 CELLPADDING=0 >
<tr>
<td><img SRC="1-1-0.jpg" height=301 width=401></td>

<td>
<table BORDER=0 CELLSPACING=0 CELLPADDING=0 COLS=1 WIDTH="100%" HEIGHT="100%" >
<tr>
<td><a href="personal.html" onMouseover="swap(0,2,1)" onMouseout="swap(0,0,0)"><img SRC="1-2-1-0.jpg" height=100 width=400 border=0 name="zero"></a></td>
</tr>

<tr>
<td><img SRC="1-2-2-0.jpg" height=100 width=400></td>
</tr>

<tr>
<td><img SRC="1-2-3-0.jpg" height=101 width=400></td>
</tr>
</table>
</td>
</tr>

<tr>
<td><img SRC="2-1-0.jpg" height=200 width=400 name="zero"></td>

<td>
<table BORDER=0 CELLSPACING=0 CELLPADDING=0 COLS=1 WIDTH="100%" HEIGHT="100%" >
<tr>
<td><img SRC="2-2-1-0.jpg" height=100 width=400></td>
</tr>

<tr>
<td><img SRC="2-2-2.jpg" height=100 width=400></td>
</tr>
</table>
</td>
</tr>
</table></center>

</body>
</html>

"Eat Cheese, Cheese is good."
-Adrobeast

[This message has been edited by Adrobeast (edited 04-08-2000).]

bitdamaged
Maniac (V) Mad Scientist

From: 100101010011 <-- right about here
Insane since: Mar 2000

posted 08-04-2000 23:49

Yup it's the name of the image you want to change. I hard coded the name of the image into the swap function (soory should have mentioned it). so there is the line that looks like this:
if (mainNum) {document.main.src = imageover[mainNum].src}

You need to change "main" to the name of the image you want to change. remember all the images you want to swap must have a name otherwise the script doesn't know what image to change. I think (not sure but it looks right) the image you want to change is 1-1-0.jpg? you can either actually name this "main" or name it whatever you want and then change the function to reflect that.

cool?

Walking the Earth like Kane

Adrobeast
Obsessive-Compulsive (I) Inmate

From:
Insane since: Aug 2000

posted 08-05-2000 19:19

So, I replace every instance of main with 2-1-0.jpg? That's the image being changed. The buttons then also chagne, which isn't working either.

"Eat Cheese, Cheese is good."
-Adrobeast

bitdamaged
Maniac (V) Mad Scientist

From: 100101010011 <-- right about here
Insane since: Mar 2000

posted 08-05-2000 20:50

Not quite, its not the actual name of the image (2-1-0.jpg) you need to name the images in your image tags. Like this:
<IMG SRC="2-1-0.jpg" NAME="MAIN">

Walking the Earth like Kane