HI ALL!

 

Im trying to do some rollover buttons on my site using 2 different images. However when I rollover the image there is a slight delay (1 or 2 secs) the first time that you do this but everytime you rollover the image after that theres no delay and it runs smootly...I think its something to do with preloader? should i load all the images in first using the preloader tag and how do I do this? Thanks

 

 

This is the code:

 

CSS FILE

 

a.image1 {

display: block;

width: 389px;

height: 204px;

background-image: url(/images/thumbs/jag.jpg);

background-repeat: no-repeat;

 

}

 

a.image1:hover {

background-image: url(/images/thumbs/jag-over.gif);

}

HTML

 

<a class="image1" href="http://www.google.com"></a>

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

 

 

That should help you out

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

 

 

That should help you out

 

 

 

hi thanks for the link! is that the only way to do it then?? to have the two images together and then just move their co-ordinates when u roll over? can u not preload them in do u know?i would prefer to have them as seperate images because one is a gif and the other i s a jpeg

hi thanks for the link! is that the only way to do it then?? to have the two images together and then just move their co-ordinates when u roll over? can u not preload them in do u know?i would prefer to have them as seperate images because one is a gif and the other i s a jpeg

 

Why is one a gif and one a jpeg? Google "A List Apart Sprite Replacement" to see the technique linked to above. I guess you could do something with javascript, but better to keep it simple IMO.

The coodinates is the best way to go, it involved loading only one images, so cuts down on load time and room for error.

ok thanks alot il stick to that...it was just that the rollover was going to be a solid colour and a gif would have been a smaller file size but its ok!thanks for ur help.big help

ok thanks alot il stick to that...it was just that the rollover was going to be a solid colour and a gif would have been a smaller file size but its ok!thanks for ur help.big help

 

If the rollover image is a navigation element (containing text) I recommend you use gif over jpeg anyway.

If the rollover image is a navigation element (containing text) I recommend you use gif over jpeg anyway.

 

 

If the text is over the image a gif is a good idea, but let's say you are using a small button image you made NEXT to the text, I would reccommend a png, as there is less distrotion and no chance of white around the image.

 

Remember, for web search engines, you want text ontop of that image, or the engines cant index your site.