I Need Help Making A Rollover Image!

[hammy]

Please help me with this. i really need to no how to make a rollover image 4 my site. a need a detailed discription please. i've looked on several sites and done several searches for help on making rollover images and none have helped me. i am using geocities as a webhost. if u help me i will give u positive feed back so please help me!

[Narue]

<a href="link" onMouseOver="document.image.src='on.gif'" onMouseOut="document.image.src='off.gif'">
  <img src="off.gif" name="image">
</a>

It's pretty simple really, onMouseOver and onMouseOut are events that are triggered when the obvious happens: the mouse enters or leaves the image boundary. document is the current HTML file, image is the name of the image we're working with, and src is the value of the image. Assigning to document.image.src changes the image, and we only assign to it during an event. Notice in the second line that the name of the image is set and the original src is off.gif.

[vegaseat]

<a href="link" onMouseOver="document.image.src='on.gif'" onMouseOut="document.image.src='off.gif'">
  <img src="off.gif" name="image">
</a>

It's pretty simple really, onMouseOver and onMouseOut are events that are triggered when the obvious happens: the mouse enters or leaves the image boundary. document is the current HTML file, image is the name of the image we're working with, and src is the value of the image. Assigning to document.image.src changes the image, and we only assign to it during an event. Notice in the second line that the name of the image is set and the original src is off.gif.

Give this person a cigar and hope it stays unlit. Nice work and helpful too! Do you get these handy little code fields by just putting

some code here

around your text?

[hammy]

wow! I've never seen such a short html code(or is it javascript) lol. its good..but, how do i do this if i am not making a page in html format? i dont know a lot about html so i prefer to just make my site in some sort of pagebuilder. i do no how to place javascripts however. so if thats what it is than no problem. Your good rep has been sent!

[Narue]

>i prefer to just make my site in some sort of pagebuilder
Even easier. A page builder should have a function that lets you insert a rollover without even touching the code. Unless it's a super cheap builder provided by a free web host. ;) In that case you'll pretty much have to get your hands a little dirty.

>html code(or is it javascript)
It's both. a href and img src are HTML tags. The onMouseOver and onMouseOut events and properties are Javascript.

[hammy]

ok but i still need help on how to change the code and what to change it to. pretty much the only part i do no how to change and what to change to is the 'a href' part. lol sorry but im a little slow on some things and need to no things in detail :o . but if it makes u feel any better youve helped me the most! :p
here is a link to 2 sample images of mine that i have made, how bout this. u can create a code using those images, and then send that code to me, and that would better help me understand what parts to change to what.
mouse off image: http://www.geocities.com/all4halo2/up.gif
mouse on image: http://www.geocities.com/all4halo2/down.gif

Thank you sooo much 4 helping me out with this :cheesy:

[Narue]

Everywhere my code uses on.gif, you use down.gif and everywhere I used off.gif, you use up.gif. It's a simple substitution, then where I have "link", change it to "http://www.whateveryoururlis.com". The a href tag creates a hyperlink, like the following:

www.google.com

The img src tag displays an image and by nesting it in an a href tag, you create an image hyperlink where the link is an image rather than simple text.

[hammy]

ok heres the code i have so far. what else do i nned to change and what would i change it to?

<a href="http://www.geocities.com/all4halo2index" onMouseOver="document.image.src='down.gif'" onMouseOut="document.image.src='up.gif'">
  <img src="down.gif" name="image">
</a>

[Narue]

>what else do i nned to change
It depends. Does it work when you paste it into your HTML file? I don't see anything wrong, so the only issue would be whether the link is valid or not.

[hammy]

o wow. i didnt acutually try it before i posted me last message :o lol sorry. IT WORKS! YAY! you dont no how much i apratiate this. thank you so much :cheesy:
here is a link to the finished page(note this is note the real thing just the example)
http://www.geocities.com/all4halo2/rollover.html

[tom_h_500]

Or you know just buy studio mx then you can make rollover images easy

[hammy]

yes if i was rich

[hammy]

ummmm, narue.....4 some reason the rollover image stoped working. i tried to make a new 1 and it didnt work etheir. heres, go back to the page i put on a different post a few days ago.
http://www.geocities.com/all4halo2/rollover.html

[hammy]

HA! nvm i figured it out