Rollover one image to another, i cannot seem to get more then one of these to work on one page...plea Options

[pleather39]

This is a personal webpage, and I'am trying to create links which change images when rolled over. I'am able to get ONE of these to function, but if I create another, the old one still exists but will not change when rolledover, while the second one will work fine. I dont know why this is!
If you want to see, look the icons on my home page, notice how the first image of a tree doesnt do anything when rolled over, when if i delete the second (black and white) one, it will work again! Argh! Its very frustrating.
Help much appreaciated!

www.orange-madness.piczo.com

reply if you want to see the code I used as well...

[Frederiek]

You can't have the two images with the same NAME attribute (both are called "home" now). Change either one to another NAME value and change the Javascript call for that image accordingly.

However, there are better and easier ways these days to swap images by using CSS instead of Javascript.
You'll find examples/links at:
http://www.d.umn.edu/itss/support/Training...design/css.html
http://www.meyerweb.com/eric/css/edge/
http://www.alistapart.com/

The WDG validator returns quite some errors on your page, which I suggest you correct.

BTW, you repeat the same script twice in your page.
And put scripts and stylesheets in the HEAD section.

[Christian J]

However, there are better and easier ways these days to swap images by using CSS instead of Javascript.

Is this still true if you take the preloading of the second image into account? For backgrounds to text links one might use http://wellstyled.com/css-nopreload-rollovers.html (but this might cause trouble if the text becomes too large).

But when changing inline images it seems to me "image replacement" solutions (combined with a link rollover) are a bit risky, both since they verge on search engine manipiulation (since you hide the original text) and perhaps also since they might cause trouble for disabled users.

[Frederiek]

In the wellstyled exemple, there's only one image, so no preloading of a second image. Quite clever, really.

As for changing text sizes, how about the Sliding Doors II article?

And no, I didn't necessary mean image replacements like in the Fahrner Image Replacement (FIR) method, although discussions and improvements on the FIR apparently keep evolving.

[Christian J]

In the wellstyled exemple, there's only one image, so no preloading of a second image. Quite clever, really.

As for changing text sizes, how about the Sliding Doors II article?

That might work for background images, though you need a workaround involving extra SPAN elements for IE.

And no, I didn't necessary mean image replacements like in the Fahrner Image Replacement (FIR) method, although discussions and improvements on the FIR apparently keep evolving.

How else can you swap inline images without javascript?

[pleather39]

Well, I apparently forgot to mention that I'am definatly a newbie, and some of this terminology is above me. I have attempted some of the first suggestions, but the others I'am quite lost on... heres the 2 codes for both images, and they are both inline.

IMAGE 1: (the one dthat doesnt work...)

<script TYPE="text/javascript">
<!--
// copyright 1999 Idocs, Inc. http://www.idocs.com/tags/
// Distribute this script freely, but please keep this
// notice with the code.

var rollOverArr=new Array();
function setrollover(OverImgSrc,tree1)
{
if (! document.images)return;
if (tree1 == null)
tree1 = document.images[document.images.length-1].name;
rollOverArr[tree1]=new Object;
rollOverArr[tree1].overImg = new Image;
rollOverArr[tree1].overImg.src=OverImgSrc;
}

function rollover(tree1)
{
if (! document.images)return;
if (! rollOverArr[tree1])return;
if (! rollOverArr[tree1].outImg)
{
rollOverArr[tree1].outImg = new Image;
rollOverArr[tree1].outImg.src = document.images[tree1].src;
}
document.images[tree1].src=rollOverArr[tree1].overImg.src;
}

function rollout(tree1)
{
if (! document.images)return;
if (! rollOverArr[tree1])return;
document.images[tree1].src=rollOverArr[tree1].outImg.src;
}
//-->
</script>


<A HREF="http://pic1.piczo.com/orange-madness/?g=23706595&cr=1" onMouseOver="rollover('jump')" onMouseOut="rollout('home')"><IMG SRC="http://p5.piczo.com/img/i131620084_39570_5.gif" NAME="jump" ALT="" BORDER="0"></A>
<script TYPE="text/javascript">
<!--
setrollover("http://p5.piczo.com/img/i130002257_44465_5.jpg");
//-->
</script>

IMAGE 2: (one that works...):
<script TYPE="text/javascript">
<!--
// copyright 1999 Idocs, Inc. http://www.idocs.com/tags/
// Distribute this script freely, but please keep this
// notice with the code.

var rollOverArr=new Array();
function setrollover(OverImgSrc,pageImageName)
{
if (! document.images)return;
if (pageImageName == null)
pageImageName = document.images[document.images.length-1].name;
rollOverArr[pageImageName]=new Object;
rollOverArr[pageImageName].overImg = new Image;
rollOverArr[pageImageName].overImg.src=OverImgSrc;
}

function rollover(pageImageName)
{
if (! document.images)return;
if (! rollOverArr[pageImageName])return;
if (! rollOverArr[pageImageName].outImg)
{
rollOverArr[pageImageName].outImg = new Image;
rollOverArr[pageImageName].outImg.src = document.images[pageImageName].src;
}
document.images[pageImageName].src=rollOverArr[pageImageName].overImg.src;
}

function rollout(pageImageName)
{
if (! document.images)return;
if (! rollOverArr[pageImageName])return;
document.images[pageImageName].src=rollOverArr[pageImageName].outImg.src;
}
//-->
</script>


<A HREF="http://pic1.piczo.com/orange-madness/?g=26249507&cr=1" onMouseOver="rollover('home')" onMouseOut="rollout('home')"><IMG SRC="http://p5.piczo.com/img/i131669089_16090_5.jpg" NAME="home" ALT="" BORDER="0"></A>
<script TYPE="text/javascript">
<!--
setrollover("http://p5.piczo.com/img/i130002258_67193_5.jpg");
//-->
</script>


The first one is with the suggestions I replaced from the first response. And of course, its still not working.. thanks for your help but I'am definatly a newbie.
TIA

[Frederiek]

Let's make easier then.

Go to http://www.javascriptkit.com/mousewhipper/index.htm, click on the link called "Create another effect" and follow the instructions in the screen that appears on the right.

It can't be simpler than that. And that way, you can get rid of the javascripts and calls you have right now.

And, bookmark that page and/or javascriptkit.com itself, as they have quite some good explained javascript samples.

Good luck!

[pleather39]

Thank you very much! The website was exceptionally easy to use and now my site is functioning well! Thanks again!

[Frederiek]

Thank you very much! The website was exceptionally easy to use and now my site is functioning well! Thanks again!

You're welcome