Mouse over image change script not working [Archive]

View Full Version : Mouse over image change script not working

Lomandriel

01-14-2004, 09:37 AM

Last night I was using a nifty script from the netguide.com.au coding section of their magazine, which is meant to change one picture to another when you put your mouse over it (and linked at the same time. Their example was a green button and purple, weith the green transforming to th epurple when the mouse was put over it, and then you could click it to goto their site: netguide.com.au.

Anyway I tried it and it juset wouldn't work. Most times it would say there's a java error, "o" is not defined etc.

Here is the script/coding I used(do you call it script for java and coding for like html etc?).

<html>

<HEAD>

<script language ="JavaSCript"> 
</script>

<title>Mouse over image event, linked to netguide</title>

</HEAD>

<body>

<a href="http://www.netguide.com.au" onMouseOver="swapImage(o,'Wreath.gif')"
onMouseOut= "swapImage(o,'Mailbox.gif')">
<img src= "mailbox.gif" border ='o'>
</a>

</body>

</html>

What I'm alseo very confused is at the start and end of the document do you use the <html> </html> flags, even if you ptu javascript and no html inside? Or you put both eveN? Because I don't really know, I did try suplementing java inside the tags, but being such a novice javascript designer, iwas left clueless.

All help appreciated

:thumbsup:

Kor

01-14-2004, 10:20 AM

1. ){document.imaged[/color[id].src=image;}

must be

){document.image[id].src=image;}

2. a string must have " " or ' '

onMouseOver="swapImage([color=red]'o','Wreath.gif')"
onMouseOut= "swapImage('o','Mailbox.gif')">

3. that o has to be an id or a name not a border , so:

<img name = 'o' src= "mailbox.gif" border =0>

These are the mistakes I saw so far...

:)

Kor

01-14-2004, 10:22 AM

sorry, some wrong vB code, so here's my answer:

1. ){document.imaged[id].src=image;}

must be

){document.image[id].src=image;}

2. a string must have " " or ' '

onMouseOver="swapImage('o','Wreath.gif')"
onMouseOut= "swapImage('o','Mailbox.gif')">

3. that o has to be an id or a name not a border (by the way, o is not the same with 0) , so:

<img name = 'o' src= "mailbox.gif" border =0>

Lomandriel

01-14-2004, 04:59 PM

Thanks for all the help, it was really appreciated. However, I'm quite new to the world of web design + programming, so could you explain what part of the code that I pasted is a string?

Also you said wrong vB coding, you mean visual basic right? If not what? I just was wondering how visual basic is related to this, unless vB doesn't stand for that *embarrassed look*.

Anyway it's still not working, no errors, but upon opening it in the browser it shows me the mailbox gif and that it is linked(it's also animated one, is it because it's an animated gif it's not working?) and tha'ts all. Moving the mouse over it does not chang eit, in fact it should be changing from wreath to mailbox, therefore the wreath should be showing first.

I'm really blown out of ideas, especially being so new to this sort of thing, I have no previous experience to implement to change the coding. Anyway this is all of my script so far, please help me with any help you have!

<html>

<HEAD>

<script language ="JavaSCript"> 
</script>

<title>Mouse over image event, linked to netguide</title>

</HEAD>

<body>

<a href="http://www.netguide.com.au" onMouseOver="swapImage('o','Wreath.gif')"
onMouseOut= "swapImage('o','Mailbox.gif')">
<img name='o' src= "mailbox.gif" border =0>
</a>

</body>

</html>

Kor

01-15-2004, 08:47 AM

<html>

<HEAD>

<script language ="JavaSCript"> 
</script>

<title>Mouse over image event, linked to netguide</title>

</HEAD>

<body>

<a href="http://www.netguide.com.au" onMouseOver="swapImage('o','wreath.gif')"
onMouseOut= "swapImage('o','mailbox.gif')">
<img name='o' src= "mailbox.gif" border =0>
</a>

</body>

</html>

Now it should work.

1. The correct syntax to refere to an image on the page is

document.images[name_or_order].src

2. Avoid using upper case in HTML and the pictures name. Better mailbox.gif than Mailbox.gif. By the way, here was another mistake, in the old code you have once with once without Upper case the picture's url+name. Make up your mind which version you want and make sure that the file is written the same way you have located in html/javascript code.

OK, Now beware that your code, as it is, need two pictures with the same size.