As most here might already know, Internet Explorer 6 only supports the CSS hover tag for anchor elements. Very unfortunate I think, since this is often a nice effect to have.
This is how it would work:
li.CssExample:hover
{
background-color: Lime;
display: inline;
margin: 10px;
}
CSS Demo
The most obvious solution is to add some javascript to the element, like for example this:
<li class="JavascriptExample" onmouseover = "javascript:this.className='JavascriptExample_hover';" onmouseout = "javascript:this.className='JavascriptExample'">
Supertext Home</li>
Demo Javascript
This is obviously not very nice to look at and also a pain to maintain. But there are good solutions out there. Prototype, Behaviour and Event-Selectors are some of them I will have a look at here.
Prototype
Let’s look at Prototype first. It’s the biggest with about ~70kb and also most powerful JavaScript library out of the three.
Event.observe(window, 'load', function(){
$$('li.PrototypeExample').each(function(el){
Event.observe(el, 'mousemove', function(){
el.className = 'PrototypeExample_hover';
});
Event.observe(el, 'mouseout', function(){
el.className = 'PrototypeExample';
});
});
});
This would do exactly the same as adding the above Javascript to every list element. We use the new $$ CSS selector from Prototype to get a list of all elements with the CSS class PrototypeExample. But one can do it even smaller:
Event.observe(window,'load',function(){
$$('li.PrototypeExample').each(function(el){
el.onmouseover = function(){
this.className = 'PrototypeExample_hover'; }
el.onmouseout = function(){
this.className = 'PrototypeExample'; }
});
});
Not 100% sure about it, but I think the main disadvantage of this method is that you cannot just call stopObserving() to unhook the event, but for a simple Roll-Over effect it should be good enough.
Demo Prototype
Behaviour
Another library that solves this problem is Behaviour, initially Prototype didn’t have the $$ function, so Behaviour came to rescue. It’s also only about 5kb and does not rely on Prototype. If you only need to add some event handler to your code, this is most likely the way to go.
var myrules = {
'div.formEntry' : function(el){
el.onmouseover = function(){
this.className = 'formEntry_hover'; }
el.onmouseout = function(){
this.className = 'formEntry'; }
}
};
Behaviour.register(myrules);
As you can see, it’s a little bit simpler and you don’t need to add it to the window load event.
Demo Behaviour
Event-Selectors
Last but not least, the same thing again, but with Event-Selectors. This is an extension to Prototype (meaning you need to include Prototype too).
var Rules = {
'li.EventSelectorsExample:mouseover':
function(element) {
element.className =
'EventSelectorsExample_hover';
},
'li.EventSelectorsExample:mouseout':
function(element) {
element.className = 'EventSelectorsExample';
}
}
EventSelectors.start(Rules);
One thing to keep in mind here, so that you either have to add it to the window onload event or add it at the end of your code and not in the beginning. I think the main advantage of Event-Selectors is that you can add multiple events and elements to one action like in the Example below (copied from their homepage):
'#icons a:mouseout, #other-item:mouseover': function(element)
{
var app = element.id;
new Effect.BlindUp(app+'-content',{queue: 'end', duration: 0.2});
}
Demo Event-Selectors
Debugging Tips:
- Do you add the events at the beginning or at the end? If it doesn’t work, try it in the windows onload event.
- Are you using ‘onmouseover’ or just ‘mouseover’? Check the examples!
- Is your element identifier an ID or a class name? ID’s are normally prefixed with #.
The only thing missing is an example with the Microsoft Ajax Library. Have not found too much about it yet, but I promise I will work on it.
