Question about image rollover

Hello!

I have noticed, that the usual way to do a image rollovers (for example different social network icons that change color when you hover your mouse over them) on Gavick (Joomla) sites is by using css classes made for each different icon. The icon image file itself is single and contains the main image and the hover one.

My question is - is this so to make it easier for everyone to use the predefined icons? For my own custom images (e.g. sponsor logos etc) that I want to have rollover - I would just use the mouseover and mouseout attributes.

Example:

Code: Select all

<p><a href="http://www.example.com" target="_blank">
<img onmouseover="this.src='/images/version2_of_my_image.png';" onmouseout="this.src='/images/version1_of_my_image.png';" src="images/version1_of_my_image.png"/>
</a></p>

It works, but maybe it's bad practice to do so?

A.

Using image of hover in same file as image "without hover" have few advances.
1. Its pure css solution, so it's fast.
2. Even with css You could use 2 separate files this way:

Code: Select all

.myElement {background: transparent url(image1.png) 0 0 no-repeat}
.myElement:hover {background: transparent url(image2.png) 0 0 no-repeat}


but this way when You hover over the element there is a small delay before "hover" image loads. Same thing happens when You use pure JS solution mentioned in your post.

3. With css hover method You have 100% control over element size, and it doesn't have to be the same size as image size (using sprites technique) . With inline image You need to have 100% correct size of an image.

Thanks!

And yes, now that You said it - I have noticed the lag/delay. Good to know that I can use css and a single file to get rid of it!

A.

I'll give You small css tip:
Lets image that You have 100x100px image. Create 100x200px png file, place inside top 100px normal state and in bottom 100 px hover state, now use css:

Code: Select all

.myElement {background: transparent url(image.png) 0 0 no-repeat}
.myElement:hover {background: transparent url(image.png) 0 -100px no-repeat}


or if You don't care about IE8:

Code: Select all

.myElement {width: 100px; height: 100px; display: block; background: transparent url(image.png) 0 0 no-repeat; text-indent: -9999px}
.myElement:hover {background-position: 0 -100px;}


this code works in 80% of cases. In others, You need to tweak it a little bit .