Image change on mouseover

Hi all!

I’m currently facing a small trouble. I have a website divided into 4 sections. Each section got a kind of tab on the left side of the screen and each section have the same design but in different colors. My section list is a <ul> and i’m using the <li>s background properties to set the picture of the tabs. I want to have all the tabs the same color (I got a picture for each section color. The text is located in a child <div>) by default (this is no problem). What I want to do is to change the tab picture so the tab color changes to its section color. For example : the welcome section is orange and the music section is green. By default, when you’re in the welcome sections, all the tabs are orange. But if you hover the music tab, it will change to a green tab.

by default, each list element is is assigned with the background of its section color. that way someone with partial CSS support or no javascript will get the tabs with all the different colors without anny animation or anything else, wich is exactly what I want. As I want to add some visual effects with mooFX after the basics are completed, I want to put a div INSIDE my <li>s with the tab picture colored to the match current section, so it hides the first picture. I managed to do that too. The trouble comes when it’s time to hide and show it. because I want users with poor javascript and css support to still get the pictures, I add my sub<div>s that way:

<div class="currentcolor hidden"></div>

The currentcolor class defines the position and the picture to be loaded in the background while the hidden class set the display property to none so users with no javascript will still see the tab colors.

Now, How do I show the tab (I tried prototype to remove the ’hidden’ class without success)? And how could I do to make the hover work both in FF and IE?

Thanks a lot for your suggestionss,

Blaise

I’d also be interested in getting image rollovers in CSS working with IE.
Firefox is not a problem, and my sites look great for it, but (as always) IE tends to ignore the standards it wants to and it I lose part of the look.

I notice that this works in ModX, although the images for the buttons in Manager are different in IE than in FF.

Any clues?

If you’re building the menu by hand, I’ve no idea. If you use a hacked version of dropmenu, it should be relatively easy to add a particular class to the "you are here" LI.

In my case, the menu was created with dropmenu, but it’s more of a general question -

In IE, how do you allow the "background: url(’image.jpg’);" property to be changed in a ":hover" class in CSS? Firefox sticks to the standards, and it works, but IE doesn’t.

In ModX you somehow manage to achieve this in IE - how?

You need to use csshover, which is distributed in assets/js/ with MODx. Add the following to the head of your template:



Voila! Hover anything support. You can also google for "hover anything IE" and probably get alternate solutions.

If you also wanted to support transparent images in .png files, the code would look like:



(Sleight is also distributed...)

Caveat: the hover anything support can frequently cause "flickering" due to IE’s propensity to reload images. The fix for that is contained at the bottom of the .htaccess file. If you have flickering problems in your site in IE, just uncomment the lines at the bottom:



Works for me.

Fantastic!

Thanks for the info Ryan

Be aware that there are issues with the .htc file - recent security changes to XP mean that if you do not have the correct MIME type on your .htc file some IE-based browsers will report a script error under some circumstances. So even if you’ve got it OK on your IE6, someone looking at your site on a McDonalds kiosk may have issues.

See also:
http://www.hoeben.net/node/83

However I am minded to just go back to JavaScript, a la Son of Suckerfish Dropdowns:
http://www.htmldog.com/articles/suckerfish/dropdowns/

Thanks a lot for the hover anything trick! I’m gonna try ASAP it along with the png thing!