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!
hammy 7 Junior Poster
Narue 5,707 Bad Cop Team Colleague
<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 1,735 DaniWeb's Hypocrite Team Colleague
<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 herearound your text?
hammy 7 Junior Poster
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 5,707 Bad Cop Team Colleague
>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 7 Junior Poster
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 5,707 Bad Cop Team Colleague
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:
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 7 Junior Poster
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 5,707 Bad Cop Team Colleague
>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.
dlh6213 commented: Thanks for helping my son with this; he's surpassing me in some areas! -- dlh +1
hammy 7 Junior Poster
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 0 Light Poster
Or you know just buy studio mx then you can make rollover images easy
hammy 7 Junior Poster
yes if i was rich
hammy 7 Junior Poster
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 7 Junior Poster
HA! nvm i figured it out
Be a part of the DaniWeb community
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.