Welcome to WebmasterWorld Guest from 54.145.174.178

Forum Moderators: not2easy

Message Too Old, No Replies

Image change on roll-over

   
5:06 pm on Mar 12, 2012 (gmt 0)



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]

12:13 pm on Mar 13, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hi there Eugene7,

and a warm welcome to these forums. ;)

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

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

birdbrain
12:21 pm on Mar 13, 2012 (gmt 0)

10+ Year Member



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*/

12:37 pm on Mar 13, 2012 (gmt 0)



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?
12:49 pm on Mar 13, 2012 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



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.
1:00 pm on Mar 13, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hi there Eugene7,

many users have javascript disabled. :(

birdbrain
1:19 pm on Mar 13, 2012 (gmt 0)



I wasn't looking to use Java, I though you could do a pre-load with CSS?
3:52 pm on Mar 13, 2012 (gmt 0)

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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.
9:55 pm on Mar 13, 2012 (gmt 0)



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.
5:18 pm on Mar 14, 2012 (gmt 0)



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.
6:59 pm on Mar 14, 2012 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



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.
7:19 pm on Mar 14, 2012 (gmt 0)



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.
7:21 pm on Mar 14, 2012 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



Fair enough, glad you got it working :-)
1:58 pm on Mar 19, 2012 (gmt 0)



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;}
8:08 pm on Mar 24, 2012 (gmt 0)



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!
6:31 am on May 23, 2012 (gmt 0)

redhat



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)