hover menu in CSS

[Simon Wigzell]

I would like to have a menu that I can send as an email that will link to various pages on my website. It will initially look like the first image here:

http://www.mississippiprinting.com/Emails/sample.htm

But as you mouseover the tabs, the corresponding image from below will appear.

I can do this in javascript no problem but more and more email programs are filtering out javascript so I would like to do it entirely in CSS with the CSS hover and background-image property.

Is this even possible? Now that I'm actually trying to do it my original idea does not seem doable. Any ideas? Thanks!

 

[Bob Lehmann]

CSS alone won't accomplish this. You will need JavaScript.

More bad news - More and more people are also setting their mail clients to
view mail plain text only.

Bob Lehmann

I would like to have a menu that I can send as an email that will link to
various pages on my website. It will initially look like the first image
here:

http://www.mississippiprinting.com/Emails/sample.htm

But as you mouseover the tabs, the corresponding image from below will
appear.

I can do this in javascript no problem but more and more email programs are
filtering out javascript so I would like to do it entirely in CSS with the
CSS hover and background-image property.

Is this even possible? Now that I'm actually trying to do it my original
idea does not seem doable. Any ideas? Thanks!

 

[Murray]

You could. I don't think it would be worth the effort, though. You would
have to be swapping large images, and the whole thing would fall completely
down in a non-HTML email client.


--
Murray

I would like to have a menu that I can send as an email that will link to
various pages on my website. It will initially look like the first image
here:

http://www.mississippiprinting.com/Emails/sample.htm

But as you mouseover the tabs, the corresponding image from below will
appear.

I can do this in javascript no problem but more and more email programs are
filtering out javascript so I would like to do it entirely in CSS with the
CSS hover and background-image property.

Is this even possible? Now that I'm actually trying to do it my original
idea does not seem doable. Any ideas? Thanks!

 

[Simon Wigzell]

You could. I don't think it would be worth the effort, though. You would
have to be swapping large images, and the whole thing would fall
completely down in a non-HTML email client.

<snip>

We only send these to people who have signed up to receive HTML formatted
emails so that is not a problem. So how can I do it???

 

[Murray]

That's not the issue. The issue is the massive images you'd have to chunk
over to the page when it is viewed. In addition, different email clients
(Entourage, Apple Mail, Outlook, Outlook Express, Thunderbird, whatever)
handle HTML rendering differently, which means that there may be none, some,
or all of your desired interactivity in the mailing's menu.

The idea would be that each link would have a background image representing
that portion of the tab array. The hover state would either specify a
different background image, or repositon the existing background image to
display the tab in the hovered state. The horizontal aggregate of all of
those contiguous images would create that tabbed effect.

The submenus would HAVE to be done with javscript as far as I can imagine,
so I guess this method is not such a great idea after all.