The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Rollover one image to another, i cannot seem to get more then one of these to work on one page...plea
pleather39
post Nov 10 2006, 02:57 AM
Post #1





Group: Members
Posts: 3
Joined: 10-November 06
Member No.: 794



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. wacko.gif
Help much appreaciated!

www.orange-madness.piczo.com

reply if you want to see the code I used as well...
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Nov 10 2006, 04:01 AM
Post #2


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Nov 10 2006, 09:17 AM
Post #3


.
********

Group: WDG Moderators
Posts: 8,043
Joined: 10-August 06
Member No.: 7



QUOTE(Frederiek @ Nov 10 2006, 10:01 AM) *

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.

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Nov 10 2006, 10:36 AM
Post #4


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Nov 10 2006, 10:57 AM
Post #5


.
********

Group: WDG Moderators
Posts: 8,043
Joined: 10-August 06
Member No.: 7



QUOTE(Frederiek @ Nov 10 2006, 04:36 PM) *

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.

QUOTE
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? unsure.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pleather39
post Nov 11 2006, 02:21 PM
Post #6





Group: Members
Posts: 3
Joined: 10-November 06
Member No.: 794



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Nov 12 2006, 08:43 AM
Post #7


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



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!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pleather39
post Nov 13 2006, 07:09 PM
Post #8





Group: Members
Posts: 3
Joined: 10-November 06
Member No.: 794



Thank you very much! The website was exceptionally easy to use and now my site is functioning well! Thanks again! biggrin.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Nov 14 2006, 02:57 AM
Post #9


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



QUOTE(pleather39 @ Nov 14 2006, 01:09 AM) *

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


You're welcome smile.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 18th February 2019 - 11:59 AM