Ad:

Geeks' Lounge Discussion Thread
Unsolved
Views: 6294

Page 1
2
Next

You are currently viewing page 1 of this multi-page discussion thread

Oct 8th, 2004

I Need Help Making A Rollover Image!

Expand Post »

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

Reputation Points: 17

Solved Threads: 1

Junior Poster

Offline

117 posts
since Oct 2004

Permalink

Oct 9th, 2004

Re: I Need Help Making A Rollover Image!

(Toggle Plain Text)

<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.

Narue

Administrator

Reputation Points: 6442

Solved Threads: 1393

Bad Cop

Offline

11,807 posts
since Sep 2004

Permalink

Oct 9th, 2004

Re: I Need Help Making A Rollover Image!

Quote originally posted by Narue ...

(Toggle Plain Text)
<a href="link" onMouseOver="document.image.src='on.gif'" onMouseOut="document.image.src='off.gif'">
  <img src="off.gif" name="image">
</a>
<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

(Toggle Plain Text)

 some code here

around your text?

vegaseat

Moderator

Reputation Points: 1333

Solved Threads: 1404

DaniWeb's Hypocrite

Offline

5,792 posts
since Oct 2004

Permalink

Oct 9th, 2004

Re: I Need Help Making A Rollover Image!

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!

hammy

Reputation Points: 17

Solved Threads: 1

Junior Poster

Offline

117 posts
since Oct 2004

Permalink

Oct 9th, 2004

Re: I Need Help Making A Rollover Image!

>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.

Narue

Administrator

Reputation Points: 6442

Solved Threads: 1393

Bad Cop

Offline

11,807 posts
since Sep 2004

Permalink

Oct 10th, 2004

Re: I Need Help Making A Rollover Image!

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:

hammy

Reputation Points: 17

Solved Threads: 1

Junior Poster

Offline

117 posts
since Oct 2004

Permalink

Oct 10th, 2004

Re: I Need Help Making A Rollover Image!

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.

Narue

Administrator

Reputation Points: 6442

Solved Threads: 1393

Bad Cop

Offline

11,807 posts
since Sep 2004

Permalink

Oct 10th, 2004

Re: I Need Help Making A Rollover Image!

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

(Toggle Plain Text)

<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>

hammy

Reputation Points: 17

Solved Threads: 1

Junior Poster

Offline

117 posts
since Oct 2004

Permalink

Oct 10th, 2004

Re: I Need Help Making A Rollover Image!

>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.

Narue

Administrator

Reputation Points: 6442

Solved Threads: 1393

Bad Cop

Offline

11,807 posts
since Sep 2004

Permalink

Oct 10th, 2004

Re: I Need Help Making A Rollover Image!

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

hammy

Reputation Points: 17

Solved Threads: 1

Junior Poster

Offline

117 posts
since Oct 2004

Page 1
2
Next

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.

Previous Thread in Geeks' Lounge Forum Timeline: Broadband / Internet Access Thru Electrical Outlets Coming?

Next Thread in Geeks' Lounge Forum Timeline: Space Elevator Competition

DaniWeb Message

Cancel Changes

User Name
Password