Welcome to WebmasterWorld Guest from 184.72.145.109

Forum Moderators: not2easy

Message Too Old, No Replies

Image change on roll-over

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

New User

joined:Mar 12, 2012
posts: 7
votes: 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)

Senior Member from GB 

WebmasterWorld Senior Member 10+ Year Member

joined:Oct 2, 2003
posts: 948
votes: 4


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)

Junior Member

10+ Year Member

joined:May 28, 2003
posts: 198
votes: 4


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)

New User

joined:Mar 12, 2012
posts: 7
votes: 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)

Senior Member

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Sept 25, 2005
posts:965
votes: 68


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)

Senior Member from GB 

WebmasterWorld Senior Member 10+ Year Member

joined:Oct 2, 2003
posts: 948
votes: 4


Hi there Eugene7,

many users have javascript disabled. :(

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

New User

joined:Mar 12, 2012
posts: 7
votes: 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)

Senior Member

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

joined:Nov 28, 2004
posts:7999
votes: 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.
9:55 pm on Mar 13, 2012 (gmt 0)

New User

joined:Mar 12, 2012
posts: 7
votes: 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)

New User

joined:Mar 12, 2012
posts: 7
votes: 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)

Senior Member

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Sept 25, 2005
posts:965
votes: 68


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)

New User

joined:Mar 12, 2012
posts: 7
votes: 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)

Senior Member

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Sept 25, 2005
posts:965
votes: 68


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

New User

joined:Mar 15, 2012
posts: 4
votes: 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)

New User

joined:Mar 12, 2012
posts: 7
votes: 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

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)
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members