Image change on roll-over

[Eugene7]

I have used CSS to make an image change on roll-over, but there seems to be a 'flash' first time, then all is ok.

Struggling to understand why this is (my coding skills are basic!).

On the main page I have the following HTML

<p><a href="#" class="s3deyes"></a></p>

and the CSS is:

.s3deyes { height: 338px; width: 488px; display:block; background:transparent url("../images/stereo-1.jpg") no-repeat; margin-left:auto; margin-right:auto; }
.s3deyes:hover { background: url("../images/stereo-2.jpg") no-repeat; }

Any help appreciated.

[edited by: alt131 at 7:19 pm (utc) on Mar 12, 2012]
[edit reason] Thread Tidy [/edit]

[birdbrain]

Hi there Eugene7,

and a warm welcome to these forums. ;)

check out the articles that you will find here...

• single image rollovers [google.com]

The "Sprite" method employed will resolve your problem. :)

birdbrain

[Paul_o_b]

Hi,

Never (if you can help it) swap an image on hover when the hovered state has not yet been seen on the page because the image is actually only loaded when called for on the page and you will get an initial delay until the image is cached.

Instead use a two state single image and swap the background position to reveal the over state (google "css rollover sprites").

You just create an image with both the normal and rollover states in place on the same image but set a little distance apart. You then use the background-position properties to only show the part of the image that needs to be seen.


e.g.

a.test {
display:block;
width:100px;/* usually restrict width and height to match the "on" state of the image*/
height:100px;
background:url(img.gif) no-repeat 0 0;/* normal state*/
}
a.test:hover{background-position:0 100%}/* hover state*/

[Eugene7]

Thanks for the ideas.

But, I was hoping not to use a combined, single image...

I though a pre-load would do the same thing?

[robzilla]

You could pre-load the hover image, but when you combine both rollover states into a single image, as Paul_o_b suggested, you (a) won't need javascript, (b) won't see the flash and (c) save a few bytes and an HTTP request, because both images combined into one equals a smaller file size than two separate images.

[birdbrain]

Hi there Eugene7,

many users have javascript disabled. :(

birdbrain

[Eugene7]

I wasn't looking to use Java, I though you could do a pre-load with CSS?

[rocknbil]

Java and JavaSCRIPT are different technologies (sorry. :-) )

You would most likely need to use Javascript to do a real "preload" to load images into the user's cache before the page renders. But that is different than what is being discussed here.

But, I was hoping not to use a combined, single image...

Why would you *not* want to do this? every image you load on a page is a request to the server, even a preload script. Every request is a hit on page load time. Plus, as mentioned, once the single image loads, there's no "delay" on mouseover. Everything is already loaded. Second, images are not just "pixels" and their cumulative file size is greater than the pixel dimensions. Translation: a group of images combined into one image will be smaller in file size than all the images individually. (It's not much, but every byte counts.)

Sprites allow you to load a single image and position them as needed using background-position, and once you get the hang of it it's very easy. You can have a single navigation image that would normally be 20 images when you include mouseovers, without delays on load or mouseover.

[Eugene7]

Ok, I fixed it with CSS only.

Simply added a pre-call to the hover image and placed it well out of view (-9999px -9999px)

Works perfectly.

[Eugene7]

If anyone has comments, or better ideas, here's the code I'm using:

HTML5
<div id="s3deyes"><a href="#"></a></div>
<div id="s3deyes1"><a href="#"></a></div>

CSS
div#s3deyes { height: 338px; width: 488px; display:block; background:transparent url("../images/stereo-1.jpg") no-repeat; margin-left:auto; margin-right:auto; }
div#s3deyes1 { background: url("../images/stereo-2.jpg") no-repeat -9999px -9999px; }
div#s3deyes:hover { background: url("../images/stereo-2.jpg") no-repeat; }

Cheers.

[robzilla]

That'll certainly work, but it won't win the beauty contest. To summarize:

Your approach:
- extra HTTP request (i.e. slower);
- JPEG overhead (i.e. slower);
- hidden content (text-indent: -9999px).

Sprite approach (cf. Paul_o_b):
- none of the above.

It's quite simple. Stack stereo-1.jpg and stereo-2.jpg on top of eachother with the graphics software of your choice, so that you end up with an image (say, stereo.jpg or stereo-12.jpg) that's 676px in height, with the contents of stereo-1.jpg at the top, and that of stereo-2.jpg at the bottom.

HTML
<div id="s3deyes"></div>

CSS
#s3deyes { height: 338px; width: 488px; background: transparent url("../images/stereo-12.jpg") no-repeat; margin-left:auto; margin-right:auto; }
#s3deyes:hover { background-position: -338px 0; }

That oughta do it.

[Eugene7]

Yeah, I get that, but I have 'loads' of images to do.
Easier to do the CSS/HTML to be honest.
Not worried about winning any beauty contests, so long as it works, and is valid code.

Also, I don't have any problems with printing the pages, etc. as the second image isn't ever seen.

Thanks for the feedback.

[robzilla]

Fair enough, glad you got it working :-)

[devangan]

ple try this:
a.s3deyes{width:100px; height:60px; float:left; background-image:url(path); background-position:0px 0px; background-repeat:no-repeat;}
a.s3deyes:hover{width:100px; height:60px; float:left; background-image:url(path); background-position:0px 0px; background-repeat:no-repeat;}

[Eugene7]

devangan, that does seem to work - two questions...

Why does it work? (I can't work out the logic ;o)
(I did say I was a dunce at this!)

And, if I want to place the image in a specific location how would I do that?

(The images I want use the roll-over effect on are presently place using <img style="position: relative; top: 50px; left: 280px;....)

Thanks in advance!

[System]

The following message was cut out to new thread by alt131. New thread at: css/4456864.htm [webmasterworld.com]
9:06 pm on May 23, 2012 (utc +12)