CSS rollover menu

[Kyle James Matthews]

Hello,

I have been lurking here for a little bit (truth be told, I lurk on too many
newsgroups to be truly effective). I have made a CSS rollover menu, and
would like some advice. The menu is at the URL
http://www.digitalovertone.com/index3.php. You will notice that the each
link disappears the first time you hover over it (this is most noticable in
Opera, in my experience). Each link consists of 2 images (1 for a:hover, 1
for a:everything else), and each image is between 500B and 2.0KB. Once the
images have been cached, this problem (obviously) disappears.

Is there any way to prevent the links from disappearing the first time while
the browser loads the :hover image? The easiest solution would of course be
to simply change the background color rather than the background image, but
this would ruin the effect of having the menu overlap the lower edge of the
picture. I would like to avoid Javascript, if possible.

I recognize the producing this effect has made for some fairly messy CSS.
That doesn't concern me at this point. I still kind of in the design phase,
and trying to get a grasp on my limitations. If there's no way to create
this effect without the link disappearing, I will seek a design solution.

Many thanks,

Kyle

[brucie]

Re: CSS rollover menu

in post: <news:4hzsc.200 7$eT4.211@attbi _s54>
Kyle James Matthews <kjmatthews7@co mcast.net> said:
[color=blue]
> Is there any way to prevent the links from disappearing the first time while
> the browser loads the :hover image?[/color]

http://www.pixy.cz/blogg/clanky/cssnopreloadrollovers/

--
b r u c i e

[e n | c k m a]

Re: CSS rollover menu

> link disappears the first time you hover over it (this is most noticable
in[color=blue]
> Opera, in my experience). Each link consists of 2 images (1 for a:hover,[/color]
1[color=blue]
> for a:everything else), and each image is between 500B and 2.0KB. Once[/color]
the[color=blue]
> images have been cached, this problem (obviously) disappears.[/color]

This idea might help you:

url:http://builder.com.com/5100-6371-5148960.html

alternatively, you could pre-load the images in HTML before the menu gets
downloaded:

<div style="visibili ty:hidden">
<img src="but1.gif" width="0" height="0" alt=""><img src="but2.gif"
width="0" height="0" alt=""><img src="but3.gif width="0" height="0" alt="">
</div>

<div id="menu">
<ul>
<li><a href="...">Abou t Us</a></li>
<li><a href="...">Serv ices</a></li>
</ul>

Hope that helped somehow,

Nick.

[brucie]

Re: CSS rollover menu

in post: <news:Brzsc.878 8$L.2621@news-server.bigpond. net.au>
e n | c k m a <bob@marley.com > said:
[color=blue]
> <img src="but1.gif" width="0" height="0"[/color]

firewalls/filters may consider the above a webbug and kill it. for
example zonealarm considers anything below 6x1px a webbug.

--
b r u c i e

[Brian]

Re: CSS rollover menu

Kyle James Matthews wrote:[color=blue]
> link disappears the first time you hover over it (this is most noticable in
> Opera, in my experience). Each link consists of 2 images (1 for a:hover, 1
> for a:everything else), and each image is between 500B and 2.0KB. Once the
> images have been cached, this problem (obviously) disappears.
>
> Is there any way to prevent the links from disappearing the first time while
> the browser loads the :hover image?[/color]

Why use images? You can style text with css, changing it on a:hover (and
again on a:active if you like). You won't get as much control over font,
and there will be some degradation in older browsers, but the benefits
(lower page weight, easy modifications, etc.) outweigh that.
[color=blue]
> The easiest solution would of course be
> to simply change the background color rather than the background image, but
> this would ruin the effect of having the menu overlap the lower edge of the
> picture.[/color]

I'm not sure how you're overlapping the nav onto the image. But you can
use position: relative for that. Just place the nav below the image in
the html, and use a negative value for top, e.g.:

#nav {position: relative; top: -.5em;}

--
Brian (remove "invalid" from my address to email me)

http://www.tsmchughs.com/

[e n | c k m a]

Re: CSS rollover menu

> firewalls/filters may consider the above a webbug and kill it. for[color=blue]
> example zonealarm considers anything below 6x1px a webbug.[/color]

wow, i didn't know!
maybe i'll use the 'two-images-in-one' trick, too then!

thanks!

[e n | c k m a]

Re: CSS rollover menu

> firewalls/filters may consider the above a webbug and kill it. for[color=blue]
> example zonealarm considers anything below 6x1px a webbug.[/color]

Actually, if I were to use display:none on the div and took the width/height
out for the image, will the image still load? I remember hearing somewhere
that display:none means that some browsers don't download the file.

Or what about:

<div style="display: block;display:n one"><img...></div>

[brucie]

Re: CSS rollover menu

in post: <news:sWRsc.109 94$L.4107@news-server.bigpond. net.au>
e n | c k m a <bob@marley.com > said:
[color=blue][color=green]
>> firewalls/filters may consider the above a webbug and kill it. for
>> example zonealarm considers anything below 6x1px a webbug.[/color][/color]
[color=blue]
> Actually, if I were to use display:none on the div and took the width/height
> out for the image, will the image still load? I remember hearing somewhere
> that display:none means that some browsers don't download the file.[/color]

i remember something like that but i'm too lazy to whip up and test page
to check.
[color=blue]
> Or what about:
> <div style="display: block;display:n one"><img...></div>[/color]

i think the single image repositioned is a much more elegant solution.

--
b r u c i e

[e n | c k m a]

Re: CSS rollover menu

> i think the single image repositioned is a much more elegant solution.

I think you're right but I'm hesitant because I haven't used
background-position before and I don't know how well supported it is...
might check w3shools.com quickly.

Actually, my issue is slightly different to the OP's... I have a link here:
url:http://144.136.41.183/pactsite/

There was an issue that the hover effect was taking a while to load but I
don't really have an "off" state as it were... the normal (unhovered) links
don't have a background. Because of this, there's no point in having one
image containing an on and off state (background-position option).

I'm trying to think of ways to _just_ preload the hover state...

[brucie]

Re: CSS rollover menu

in post: <news:etTsc.111 32$L.1882@news-server.bigpond. net.au>
e n | c k m a <bob@marley.com > said:
[color=blue]
> url:http://144.136.41.183/pactsite/
> There was an issue that the hover effect was taking a while to load but I
> don't really have an "off" state as it were... the normal (unhovered) links
> don't have a background.[/color]

use a gif with the "off" part of the image transparent


--
b r u c i e

[Neal]

Re: CSS rollover menu

On Wed, 26 May 2004 02:41:14 GMT, e n | c k m a <bob@marley.com > wrote:
[color=blue][color=green]
>> i think the single image repositioned is a much more elegant solution.[/color]
>
> I think you're right but I'm hesitant because I haven't used
> background-position before and I don't know how well supported it is...
> might check w3shools.com quickly.[/color]

Don't be afraid. Test it in the most current Mozilla, Opera, IE and then
Lynx and maybe an old Netscape. Dive in the deep end, my friend.
[color=blue]
> Actually, my issue is slightly different to the OP's... I have a link
> here:
> url:http://144.136.41.183/pactsite/
>
> There was an issue that the hover effect was taking a while to load but I
> don't really have an "off" state as it were... the normal (unhovered)
> links
> don't have a background. Because of this, there's no point in having one
> image containing an on and off state (background-position option).
>
> I'm trying to think of ways to _just_ preload the hover state...[/color]

Functions fine in Opera 7.23, Mozilla 1.6, and IE6. I think it's rendering
fine.

[e n | c k m a]

Re: CSS rollover menu

> Don't be afraid. Test it in the most current Mozilla, Opera, IE and then[color=blue]
> Lynx and maybe an old Netscape. Dive in the deep end, my friend.[/color]

Time's the enemy :)
[color=blue]
> Functions fine in Opera 7.23, Mozilla 1.6, and IE6. I think it's rendering
> fine.[/color]

Thanks - I think that's because I preload it on the index.html page with a
display:none <div> (as mentioned previously).

[e n | c k m a]

Re: CSS rollover menu

> use a gif with the "off" part of the image transparent

maybe... I'll look into it - thanks!