[BNM] [Bulk] Re: CSS rollover image links

[robert stevens]

Matt, Steve,

Thanks for the advice. I've tried the background-position method and it
works fine: OS X - Safari, Firefox and even IE 5.2 (which is probably a good
sign). So, hopefully ok IE Win too.

Cheers,
Rob

> Steve Esson7/3/07 4:49 pm stevee at gmail.com

> On 07/03/07, matt stone <stone.matthew at gmail.com> wrote:
>> On 3/7/07, robert stevens <Robs_here at btinternet.com> wrote:
>>> Hi BNM,
>>> 
>>> I'm having to create a navigation using images of different widths on the
>>> page and for each there will be a 'hover' image too.
>>> 
>>> I am wondering a few things:
>>> 
>>> Can I pre-load the hover state image without using JavaScript?
>>> 
>>> If not, should I turn the image into one image, and set up the CSS to reveal
>>> the 'hover' part of that image on rollover?
>>> 
>>> Or, is there a reliable CSS way to preload an image? such as:
>>> <img src="myimage.jpg" style="display: none">
>>> 
>>> The simplest, most robust and compliant method for this much desired.
>>> 
>> 
>> Turn it into one image, size your container accordingly then use
>> background-position on hover to bring the other half of the image
>> over.
> 
> Doesn't IE have problems with this method? Some flickering or
> something (from memory), ignore me if this is to do with something
> else.
> 
> This is another method (tho maybe not as clean as Matts suggestion):
> 
> a { background: url('hover.gif'); }
> a:link { background: url('default.gif'); }
> a:hover { background: url('hover.gif'); }
> 
> Load the hover image then reset back to the normal. Causes the browser
> to load all images at once.
> 
> HTH
> Steve