Closed Thread Icon

Preserved Topic: Changing multiple graphics with a rollover. 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." rel="nofollow" >Preserved Topic: Changing multiple graphics with a rollover.\
 
Author Thread
Adrobeast
Obsessive-Compulsive (I) Inmate

From:
Insane since: Aug 2000

 posted 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 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 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 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 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 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 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 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 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

« Backwards — Onwards »

Show Forum Drop Down Menu