Preserved Topic: Image-swapping between layers... $Pages that link to <a href="https://ozoneasylum.com/backlink?for=18121" title="Pages that link to Preserved Topic: Image-swapping between layers..." rel="nofollow" >Preserved Topic: Image-swapping between layers...\$

Author	Thread
Shawn David Struck Obsessive-Compulsive (I) Inmate From: Insane since: Jul 2001	posted 07-23-2001 20:21 Hello all. Long time listener, first-time caller, etc. ^_^; I have been struggling with this problem involving Javascript and a form of image swapping for 2 days now... I would humbly ask for any help anyone would be willing to give me. I just hope I don't seem rude or silly for asking. Here goes... Any javascript wizards out want to help me out? I'm trying something for nbps.k12.nj.us/staging/nbps3d.htm wherein when one mouseovers the A. Chester Redshaw button (vorred.gif), not only would it change to it's own mouseover (vorred2.gif), but also cause the image slice collage3_r4_c4.jpg (it's next to the "teacher's web" button) to change to collage3_r4_c4a.jpg at the same time. I keep messing up the javascript and it's really, really upsetting me. How can I get this to work? ANY ideas? And I've tried tutorials. They keep confusing me. >_< Thanks in advance.
bitdamaged Maniac (V) Mad Scientist From: 100101010011 <-- right about here Insane since: Mar 2000	posted 07-23-2001 20:36 Ironically I just wrote this last night for a friend To use this. put all the script within <script> tags in the head <script language="Javascript"> stufff here </script> Then in your body tag you put <body onLoad="preload()" Okay here is the deal in the preloader change the array to all of the images you want to swap. Now you should be set. The swap function switches the nav item. switchMain switches the main image. Links should look something like this <a href="whatever.com" onMouseover="swap('anImage',0);switchMain('3')" onMouseout="swap('anImage',1)"> Where the numbers correspond with the image number in the array This is rough instructions. Why don't you try installing this and let me know where you have problems. var loaded; function preload() { if (document.images) { // Put your images here. Just cut and paste. // Make sure the numbers are all in order. // I'd put the main images in first and then all the over and off states for the nav second. daImgArray = new Array() daImgArray[0] = "images/lap_01.jpg"; daImgArray[1] = "images/liz_2.jpg"; daImgArray[2] = "images/liz_3.jpg"; daImgArray[3] = "images/liz_4.jpg"; daImgArray[4] = "images/liz_5.jpg"; daImgArray[5] = "images/liz_6.jpg"; daImgArray[6] = "images/gwen_1.jpg"; daImgArray[7] = 'images/members_on.gif'; daImgArray[8] = 'images/members_off.gif'; daImgArray[9] = 'images/join_on.gif'; daImgArray[10] = 'images/join_off.gif'; daImgArray[11] = 'images/contact_on.gif'; daImgArray[12] = 'images/contact_off.gif'; daImgArray[13] = 'images/booking_on.gif'; daImgArray[14] = 'images/booking_off.gif'; daImgArray[15] = 'images/cd_on.gif'; daImgArray[16] = 'images/cd_off.gif'; daImgArray[17] = 'images/links_on.gif'; daImgArray[18] = 'images/links_off.gif'; daImgs = new Array(); for (i=0; i < daImgArray.length; i++) { daImgs[i] = new Image; daImgs[i].src = daImgArray[i]; } loaded = true; } } function switchMain(daImgNum) { if (document.images && loaded) { document.mainImg.src= daImgs[daImgNum].src; } } //Pop Up windows function openWin( windowURL, windowName, windowFeatures ) { return window.open( windowURL, windowName, windowFeatures ) ; } function swap(name,num){ if((document.images) && (loaded)){ document[name].src = daImgs[num].src; } } Walking the Earth like Kane
Shawn David Struck Obsessive-Compulsive (I) Inmate From: Insane since: Jul 2001	posted 07-24-2001 16:23 Thank you very much for your help.... I tried setting it up, as you said... but it wasn't wirking. I kept getting undefined, even after plugging in the vales and images yu recommended. So... I tried another script idea... that didn't work, either... but it looks structurally sound. Is there something I'm doing wrong? (I'm sorry to be a pain in the butt; this is the most advanced js;ing I've ever done. ^_^; the page is: http://www.nbps.k12.nj.us/staging/nbps3d.htm
bitdamaged Maniac (V) Mad Scientist From: 100101010011 <-- right about here Insane since: Mar 2000	posted 07-24-2001 18:38 Okay here's the deal you have the img named "pic1" which should be named "img01" This line here: <a href="#" onmouseout="imgOff('img01')" onmouseover="imgOn('img01'); return true;"> <img border="0" src="vorred.gif" width="126" height="31" name="img01"></a> Then it will still break because you don't have an image named "photo" AND "collage3_r1_c1": <img name="collage3_r1_c1" src="collage3_r1_c1.jpg" width="117" height="84" border="0" name="photo"> you need to take out the first name Here's a working copy Oh the other image can't be found so it shows a broken image on the mouseover. :[ Computers let you make more mistakes faster than any other invention in human history, with the possible exceptions of handguns and tequila. ]:
Dark Neurotic (0) Inmate Newly admitted	posted 08-02-2001 15:20 OnMouseOver that writes into a layer.
Shawn David Struck Obsessive-Compulsive (I) Inmate From: Insane since: Jul 2001	posted 08-02-2001 16:51 Thank you both so much! ^_^ See, this is what I get for doing my scripting when I'm coming off a caffiene crash. >_< bitdamaged, the working copy worked like a charm! ^_^ Really, thank you so much-- actually going in and scripting a working copy was something above and beyond the call of normal "help the noob out" posting. and Dark, hats off to you... I'm going to be taking a good look at the script and do my best to learn from it. You all have been very helpful, thanks! ^_^

Preserved Topic: Image-swapping between layers...\$

Author

Thread

Shawn David Struck
Obsessive-Compulsive (I) Inmate

From:
Insane since: Jul 2001

posted 07-23-2001 20:21

Hello all. Long time listener, first-time caller, etc. ^_^;

I have been struggling with this problem involving Javascript and a form of image swapping for 2 days now... I would humbly ask for any help anyone would be willing to give me.

I just hope I don't seem rude or silly for asking. Here goes...

Any javascript wizards out want to help me out?

I'm trying something for nbps.k12.nj.us/staging/nbps3d.htm
wherein when one mouseovers the A. Chester Redshaw button (vorred.gif), not only would it change to it's own mouseover (vorred2.gif), but also cause the image slice collage3_r4_c4.jpg (it's next to the "teacher's web" button) to change to collage3_r4_c4a.jpg at the same time.

I keep messing up the javascript and it's really, really upsetting me. How can I get this to work?

ANY ideas? And I've tried tutorials. They keep confusing me. >_<

Thanks in advance.

bitdamaged
Maniac (V) Mad Scientist

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

posted 07-23-2001 20:36

Ironically I just wrote this last night for a friend

To use this. put all the script within <script> tags in the head
<script language="Javascript">

stufff here

</script>

Then in your body tag you put

<body onLoad="preload()"

Okay here is the deal in the preloader change the array to all of the images you want to swap.

Now you should be set.
The swap function switches the nav item. switchMain switches the main image.

Links should look something like this
<a href="whatever.com" onMouseover="swap('anImage',0);switchMain('3')" onMouseout="swap('anImage',1)">

Where the numbers correspond with the image number in the array

This is rough instructions.

Why don't you try installing this and let me know where you have problems.

var loaded;
function preload() {
if (document.images) {
// Put your images here. Just cut and paste.
// Make sure the numbers are all in order.
// I'd put the main images in first and then all the over and off states for the nav second.
daImgArray = new Array()
daImgArray[0] = "images/lap_01.jpg";
daImgArray[1] = "images/liz_2.jpg";
daImgArray[2] = "images/liz_3.jpg";
daImgArray[3] = "images/liz_4.jpg";
daImgArray[4] = "images/liz_5.jpg";
daImgArray[5] = "images/liz_6.jpg";
daImgArray[6] = "images/gwen_1.jpg";
daImgArray[7] = 'images/members_on.gif';
daImgArray[8] = 'images/members_off.gif';
daImgArray[9] = 'images/join_on.gif';
daImgArray[10] = 'images/join_off.gif';
daImgArray[11] = 'images/contact_on.gif';
daImgArray[12] = 'images/contact_off.gif';
daImgArray[13] = 'images/booking_on.gif';
daImgArray[14] = 'images/booking_off.gif';
daImgArray[15] = 'images/cd_on.gif';
daImgArray[16] = 'images/cd_off.gif';
daImgArray[17] = 'images/links_on.gif';
daImgArray[18] = 'images/links_off.gif';

daImgs = new Array();

for (i=0; i < daImgArray.length; i++) {
daImgs[i] = new Image;
daImgs[i].src = daImgArray[i];
}
loaded = true;
}
}

function switchMain(daImgNum) {

if (document.images && loaded) {
document.mainImg.src= daImgs[daImgNum].src;
}

}

//Pop Up windows
function openWin( windowURL, windowName, windowFeatures ) {

return window.open( windowURL, windowName, windowFeatures ) ;

}

function swap(name,num){
if((document.images) && (loaded)){
document[name].src = daImgs[num].src;
}
}

Walking the Earth like Kane

Shawn David Struck
Obsessive-Compulsive (I) Inmate

From:
Insane since: Jul 2001

posted 07-24-2001 16:23

Thank you very much for your help....

I tried setting it up, as you said... but it wasn't wirking. I kept getting undefined, even after plugging in the vales and images yu recommended.

So... I tried another script idea... that didn't work, either... but it *looks* structurally sound.

Is there something I'm doing wrong?

(I'm sorry to be a pain in the butt; this is the most advanced js;ing I've ever done. ^_^;

the page is: http://www.nbps.k12.nj.us/staging/nbps3d.htm

bitdamaged
Maniac (V) Mad Scientist

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

posted 07-24-2001 18:38

Okay here's the deal you have the img named "pic1" which should be named "img01"

This line here:
<a href="#" onmouseout="imgOff('img01')" onmouseover="imgOn('img01'); return true;">
<img border="0" src="vorred.gif" width="126" height="31" name="img01"></a>

Then it will still break because you don't have an image named "photo" AND "collage3_r1_c1":

<img name="collage3_r1_c1" src="collage3_r1_c1.jpg" width="117" height="84" border="0" name="photo">

you need to take out the first name

Here's a working copy

Oh the other image can't be found so it shows a broken image on the mouseover.

:[ Computers let you make more mistakes faster than any other invention in human history, with the possible exceptions of handguns and tequila. ]:

Dark
Neurotic (0) Inmate
Newly admitted

posted 08-02-2001 15:20

OnMouseOver that writes into a layer.

Shawn David Struck
Obsessive-Compulsive (I) Inmate

From:
Insane since: Jul 2001

posted 08-02-2001 16:51

Thank you both so much! ^_^ See, this is what I get for doing my scripting when I'm coming off a caffiene crash. >_<

bitdamaged, the working copy worked like a charm! ^_^ Really, thank you so much-- actually going in and scripting a working copy was something above and beyond the call of normal "help the noob out" posting.

and Dark, hats off to you... I'm going to be taking a good look at the script and do my best to learn from it. You all have been very helpful, thanks! ^_^