CODING CSS, HTML HELP! (image rollovers)?

Question

mkay. so i'm trying to create a web page and on it i'd like to use image rollovers.

i've already done the hard part of making the graphic and the overview for the rollover; done the mapping/slicing of the images to make the buttons, and even uploaded the links (phew). so the hardest parts are done. now all i need to do is figure out how to code it. everything works fine in the preview and the actual links do work on the page but the rollovers will not show up. what am i doing wrong? someone help me out here... i've been working on this page for 24+ hours straight and i feel like a crazy person!

Answer 1

Javascript isn't necessary for an image rollover effect.  In fact, it slows down your page, resulting in a possible loss of visitors!

Do this:

<div class="blah">

</div>

And in your style sheet include:

.blah {

height: include height of image here in pixels;

width: include width of image here in pixels;

image: url( INCLUDE THE URL OF THE IMAGE HERE);

}

.blah:hover {

image:url (INCLUDE THE URL OF THE ROLL OVER IMAGE HERE;);

}

So, you're using simple CSS to do your rollover image.  Just fill in the selectors :)

Answer 2

If you put up your code, or a link to the broken site then someone may be able to help... Based on what you have said, it could be anything...

Usual way to do roll overs is javascript 'onmouseover' and 'onmouseout' events that swap the value of the img src attribute...

Answer 3

A:link{color:blue}

A:visited{color:yellow}

A:active{color:green}

A:hover{color:white}

etc...

you can change it just like any other CSS property

Answer 4

Without being able to see the code, there is no way anyone can help you.