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]

in post: <news:4hzsc.2007$eT4.211@attbi_s54>
Kyle James Matthews <kj*********@comcast.net> said:

Is there any way to prevent the links from disappearing the first time while
the browser loads the :hover image?

http://www.pixy.cz/blogg/clanky/cssnopreloadrollovers/
--
b r u c i e

[e n | c k m a]

> 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.

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="visibility: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="...">About Us</a></li>
<li><a href="...">Services</a></li>
</ul>

Hope that helped somehow,

Nick.

[brucie]

in post: <news:Br***************@news-server.bigpond.net.au>
e n | c k m a <bo*@marley.com> said:

<img src="but1.gif" width="0" height="0"

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]

Kyle James Matthews wrote:

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?
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.
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'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]

> firewalls/filters may consider the above a webbug and kill it. for

example zonealarm considers anything below 6x1px a webbug.

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

thanks!

[e n | c k m a]

> firewalls/filters may consider the above a webbug and kill it. for

example zonealarm considers anything below 6x1px a webbug.

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:none"><img...></div>

[brucie]

in post: <news:sW****************@news-server.bigpond.net.au>
e n | c k m a <bo*@marley.com> said:

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

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.
i remember something like that but i'm too lazy to whip up and test page
to check.
Or what about:
<div style="display:block;display:none"><img...></div>

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

--
b r u c i e

[e n | c k m a]

> 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]

in post: <news:et****************@news-server.bigpond.net.au>
e n | c k m a <bo*@marley.com> said:

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.

use a gif with the "off" part of the image transparent
--
b r u c i e

[Neal]

On Wed, 26 May 2004 02:41:14 GMT, e n | c k m a <bo*@marley.com> wrote:

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.

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.
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...

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

[e n | c k m a]

> 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.
Time's the enemy :)
Functions fine in Opera 7.23, Mozilla 1.6, and IE6. I think it's rendering
fine.

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]

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

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