How to make a rollover/hover button with Javascript?

[O Hammer O is my gamertag]

On my website I want the picture (which is also a link) to change when someone puts the cursor on it. I have made both pictures, but I don't know Java. Can someone help me out?

EDIT: I made a hover button in FrontPage and copied the code and just changed the filenames so it has my pics. It seems to be working.

 

[O Hammer O is my gamertag]

Ok, the Frontpage thing worked when I only had 1 picture, but when I try to use the code on several pics, it doesn't work. Is there an easy way to do this?

 

[fs5]

post the code

 

[imported_LoKe]

Why not skip the Java and use something as simple as CSS?

 

[O Hammer O is my gamertag]

Originally posted by: LoKe
Why not skip the Java and use something as simple as CSS?

How? I didn't know I could do it with CSS.

 

[O Hammer O is my gamertag]

Originally posted by: fs5
post the code

 

[Isaiah]

Don't use Javascript, CSS is the best way to do image rollovers.

Try something like this:

a.class_name:link, a.class_name:visited, a.class_name:active {
color:#fff;
text-decoration:none;
background:#fff url(rollover.jpg) no-repeat;
}
a.class_name:hover {
color:#fff;
background:#fff url(rollover2.jpg) no-repeat;
}

Or even better just have one image that includes both images and have the css change the offset like this, that way you don't have to preload the images:

a.class_name:hover {
color:#fff;
background:#fff url(rollover.jpg) no-repeat -200px 0px;
}


If you don't know any css, I suggest you do a quick search on google at read up on it, because it will help you understand what you are doing... not just blindly copy and pasting code

I've attached a some more CSS code... you should be able to copy and paste it(changing the colors, images and class name to fit your needs

-Isaiah

 

[O Hammer O is my gamertag]

Ok thanks. I have to go to work right now, so I can't test this out yet, but does the image have to take up the whole cell of the table? I just see the word background, so I'm wondering.

 

[Isaiah]

No, if you look at the code I attached it should say:
width:200px;
height:100px;

That is where you set the site of the image that is going to be displayed.

If this is for a menu you might want to think about using <ul>(list) not a table.

You might want to take a look at this site: http://www.projectseven.com/tutorials/css/uberlinks/

-Isaiah

 

[O Hammer O is my gamertag]

Yes, it's for a menu, but there's only 3 pics (6 if you include the rollover images), and that uberlinks thing doesn't really apply to what I'm doing.

Now I know basic CSS, like to format my text and stuff, but I don't quite understand this rollover CSS.

So could maybe help me a little more, and use this example: normal image = img1.jpg, rollover image = img2.jpg, height= 50, width = 100.

Because I copied your code and pasted it into Frontpage to see what it would look like, and it just showed up as text when I previewed it. So PLEEEEASE can you help me some more? *sad puppy face*

 

[Isaiah]

Can you show me an example of what you have done so far?

Here is an example I made using the css code I gave you: http://www.iitechconsulting.com/example.html

How do you want your menu to look?

You can have two image files like you are talking about, but I like to combine them into one file, and just change the display offset in the css code(see example) that way you don't have to worry about preloading or the image taking a while to load when you roll your mouse over it.

 

[O Hammer O is my gamertag]

Alright, well I finally got the Javascript one to work, so I'm not going to worry about doing it with CSS, but thank you so much for all the help. If you really want to see it, it's

http://www.fpsgaming.us

I'm hoping to make some money with AdSense, that's why I made the site. And it might look like a bad layout to some, but since it's my first one and I made it by myself, I kind of like it.