image conundrum

[slee]

ive set up a section of a site to have background imaeg on some links then on hover i change the image to be an animated image to give a rollover effect.

to do this without having a white flash ive hidden some elements that load the images bit like forcing a preload.

it seems to work ok but on occasion i still get a flash when the image hasnt already been loaded.

what i am considering doing is to create the images as one and then using css to move the image on hover.

the trouble im thinking though is the image file sizes are slightly larger. ive considered the static image size and the first animated image and then what the combined image is and on average it is a 5kb larger. the max file size for the combined animated image is 39kb and i have 5 of them on the page. the smallest is 27kb. will these be too big?

what are your thoughts?

[narendra.s.v]

can we have a preview or code! coz it do happens(like the white flash you said) as it takes time to load the images so on the 1st roll it happends but then they will be fine i think!

[slee]

you are right that after the first load they are fine but i need to stop this as it looks bad. so ive hidden some html elements that using css loads the images as background but off the screen. i guess my question is should i leave it like it is or shold i look at combining the image as one?

by combining the image it would make for less markup but the image size maybe too big?

the site is here: footprintfriends.com (the 5 images at the bottom)

[narendra.s.v]

well i suggest better to leave as it wont bother much coz if the user waits until its loaded then there will be no white flash too. So it wont be a problem or better reduce the size of the image so it may load faster as you said!

[slee]

ok thanks, i think ill keep an eye on it for a while and see how it goes.

[ap4a]

I wouldn't leave it, I'd fix it. I'd even help you to fix it if you were to help me to help you ;)

Any chance of a link to see the issue in action, along with a list of browsers it happens in?

I can tell you what it's likely to be without that, and how to fix it. However I'd prefer to make sure first as guesses at fixes waste togo much time.

[Kevin]

nice design slee. I don't see any white flash when I roll over the image (I'm using firefox).

I've always done rollovers the way you are doing them now...ie. individually. I've not tried to do it using a static background.

I wouldn't leave it, I'd fix it. I'd even help you to fix it if you were to help me to help you ;)

Any chance of a link to see the issue in action, along with a list of browsers it happens in?

I can tell you what it's likely to be without that, and how to fix it. However I'd prefer to make sure first as guesses at fixes waste togo much time.

Hey hurricane,

It's the images at the bottom of footprintfriends.com (http://footprintfriends.com)

:)

[slee]

thanks kev :) i spent last weekend updating it, it was a loooong weekend.

You should signup to the supporters section :)

sorry to be a pain but can you unlink the link in your post to the site please.

[ap4a]

Cheers Kev, I missed the url first time around.

Lee, the usual way to fix that would be to:

1. Place the hover state background on the list item
2. Place the default state background on the link
3. Set the hover state of the link to use a transparent background

However as you're using image replacement as a part of your method it's slightly more roundabout as this won't work with the method of IR you're using and the method it will work with doesn't have any visible text if images don't load. Which is why I came up with a different way of doing the same thing for my blog, if you have a look at the back to top links on my blog you'll see the technique in action, and the basic method is:

1. make the default state 'background' a html embedded image nested within the link
2. use the image's alt attribute for the link text (when images don't load that will display, and screen readers will get it too)
3. use the 'hover' state background as the link background
4. remove the embedded image on :hover (and also for :active and :focus) to reveal the link background. To get this to work across browsers you need to use visibility: hidden;

The relevant markup from my blog is:

<div class="up"><a href="#skipper" title="Back to top"><img src="images/up.png" width="16" height="16" alt="Up arrow" /></a></div>


For yours the alt text would be competitions, games, events and so on.

And the CSS is:

div.up {
float: right;
margin: 5px 10px 0 0;
padding: 0;
width: 16px;
height: 16px;
}

div.up a, div.up a img {
display: block;
position: absolute;
padding: 0;
margin: 0;
}

div.up a {
background: url(images/up2.png) no-repeat center bottom;
position: relative;
width: 100%;
height: 100%;
text-decoration: none;
cursor: pointer;
}

div.up a img {
top: -5px;
left: -5px;
border: none !important;
}

div.up a:hover img, div.up a:active img, div.up a:focus img {
visibility: hidden;
}


The first rule set is just positioning the container div for it, you'd need to position yours as needed. Also,p mine's done with a div and not a list as it isn't a list, but you should be able to easily adapt it to a list by changing div to li and using the appropriate classes and IDs for the list and each list item. The negative top and left on div.up a img is just to fine tune the positioning for my example.

Essentially what this method does is reduce the markup down to only what is required for the content, and not what is required to style it.

Just to add:
In some browsers (IE 6) if the browser is set to check for a new version of the page on every visit it will do so every time you mouse over a link that has a background image set on the :hover state of a link (or on a nested span when the selector includes a link hover state). This will cause a momentary flash of white while the browser waits for the server to resend the image instead of pulling it directly out of the cache. To get around that you use the method in the first example I've given above; the second example achieves the same thing but allows text to be visible when images don't load.

[slee]

thanks Dave! ive adapted it slightly to fit my needs and i assume you mean the a element:

1. make the default state 'background' a html embedded image on the list item

ive got it working but not in ie6 :(

[ap4a]

thanks Dave! ive adapted it slightly to fit my needs and i assume you mean the a element:

1. make the default state 'background' a html embedded image on the list item

ive got it working but not in ie6 :(


yeah, sorry I rewrote what I'd used for the first method and didn't change that bit for the second method. I'll take a look at it to see why it's not working in IE 6 for you later this evening if you want (I have to go out soon), as it should be working if you've followed what I've done fully (it works in IE 6 on my blog).

[slee]

if you could have a look that would be great. ive not followed it exactly as its slightly different but ive tried to follow what you have done. for example im not able to set the position absolute like you have so maybe that is an issue for ie6?

[ap4a]

if you could have a look that would be great. ive not followed it exactly as its slightly different but ive tried to follow what you have done. for example im not able to set the position absolute like you have so maybe that is an issue for ie6?

Yeah, is there a specific reason you can't use absolute there?

[slee]

using absolute on the 'a' makes it go wrong even though the li is relative. it is already using absolute on the image, but that made no difference to ie6

[ap4a]

using absolute on the 'a' makes it go wrong even though the li is relative. it is already using absolute on the image, but that made no difference to ie6

What specifically do you mean by go wrong?

[slee]

on the site the images just don't appear i think they are underneath something

[ap4a]

ive got it working but not in ie6 :(

Sorry, I've just reviewed my blog post on it, and it doesn't work in IE 6 (shows how often I I look at my site). Given that IE 6 is very soon to be obsolete I didn't mind the feature degrading. If you need it to work in IE 6 then you have the other option:

1. Place the hover state background on the list item
2. Place the default state background on the link
3. Set the hover state of the link to use a transparent background (or just move the background for the default link state away)

Then use a different method of IR - notably the off left method. While the off left method, using text-indent to set the anchor text off the screen, won't leave any text for if images don't load, it will allow you to use the above method.

Unfortunately where IE 6 is concerned design decisions are about compromises, and it's up to you to choose which is the most acceptable compromise (in my case it was to use the method in place on my blog and not have the mouseover work for IE 6 and under).

[slee]

i think considering the option im going to stick with how it works at the moment. it nicely degrades, works for everyone apart from ie6 which in ie6 it just means they don't animate which isnt a big deal as its only an extra thing for the site it's not something that is needed. i can't wait for ie6 to vanish im sure there will be a global cheer when it does!