View Full Version : Help, rollover image

02-08-2012, 10:31 AM
hey, im trying to create a rollover image, ive created code that does this, however when my rollover image appears the original stationary image apperas above it also, how do i get rid of it, can you help??? code is below>>

<style type="text/css">
.rollover a { display : block;
width : 120px;
height : 120px;
background-image:url( dom.jpg ); }

.rollover a:hover { display : block;
width : 120px;
height : 120px;
background-image:url( dom1.jpg ); }


02-08-2012, 03:33 PM
Hello mintycow123,
There is not much we can tell from that little bit of code and no image. A link to the test site would make it a lot easier to help you.

I can suggest a demo that shows how it's done, see CSS rollover here (http://nopeople.com/CSS%20tips/CSS_rollover/index.html).

02-08-2012, 03:38 PM
You need both of your images combined into a single image. The dom.jpg at the top of the new image with dom1,jpg under it. This is called a sprite.

Your css code displays only part of your new image controlling the area its shown in and what part of the image is shown.

Read this for step by step instructions:

02-09-2012, 01:37 AM
if you have dreamweaver, it has a built in rollover image thingy.
Insert > Media > Rollover Image
Although id just recommend doing what sunfigher said.