homepage Welcome to WebmasterWorld Guest from 184.72.82.126
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Image change on roll-over
Eugene7




msg:4428191
 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]

 

birdbrain




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

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

Paul_o_b




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

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




msg:4428543
 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?

robzilla




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

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




msg:4428557
 1:00 pm on Mar 13, 2012 (gmt 0)

Hi there Eugene7,

many users have javascript disabled. :(

birdbrain

Eugene7




msg:4428579
 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?

rocknbil




msg:4428641
 3:52 pm on Mar 13, 2012 (gmt 0)

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




msg:4428807
 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.

Eugene7




msg:4429119
 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.

robzilla




msg:4429164
 6:59 pm on Mar 14, 2012 (gmt 0)

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




msg:4429176
 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.

robzilla




msg:4429177
 7:21 pm on Mar 14, 2012 (gmt 0)

Fair enough, glad you got it working :-)

devangan




msg:4430852
 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;}

Eugene7




msg:4433062
 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!

System
redhat



msg:4456866
 6:31 am on May 23, 2012 (gmt 0)

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)

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved