Hi folks.

 

For the past while i've been having trouble getting CSS image rollovers to work.

 

I have read methods which change the background-position of images to carry out the swap.

 

 

After some farting about i've managed to get a method which switches between 2 images to work.

 

 

It seems to work and i've not had any problems with it.

 

Can anyone tell me if there are disadvantages to the method i've used or even let me know if there is a better way.

 

 

 

Here is an example of one of the buttons.

 

 

CSS:

 

 

#news_ {
position:absolute;
left:13px;
top:111px;
width:47px;
height:33px;
background:url("images/news.png") no-repeat;

}

#news_:hover { 
background:url("images/news2.png") no-repeat;
}

 

 

HTML:

<a href="index.php"><div id="news_"></div></a>

other than no explanation as to why you have used a trailing slash in the id name _ looks fine to me

nice one cheers.

 

the trailing slash for some reason was put there when i used photoshop to save my splices psd as a html file, just not got round to taking them out.

well i think :hover only works in anchors in ie6, but since your using anchors anyway you could do something like

 

 

a #news_ {
position:absolute;
left:13px;
top:111px;
width:47px;
height:33px;
background:url("images/news.png") no-repeat;

}

a:hover #news_ {
background:url("images/news2.png") no-repeat;
}

The problem with the way you are doing it is that it will create a flicker while the images change (this is when the image will disapear while the otherone loads. I explained how to avoid this a while a go, so it might be of use to you too, it can be found here:

 

http://www.webdesignerforum.co.uk/index.ph...ost&p=21844

 

 

It might also help you in showing you a better way to do the html as well as the css

ah right, so using the background-position eliminates the flicker.

 

all i'll need to do then is follow your code and join my news.png and news2.png together.

 

sweet, i get that.

 

cheers!!

Got it working using your method Dizi, now no flicker!!

 

Thanks again everyone!