@ Jesse R
The animated gif could work, but you’d need a different one for each color background since animated gifs don’t support alpha transparency. Also, I’ve found that a lot of IE6 installs have gif animations turned off or blocked. The method below allows for alpha transparency so you can overlay it over any background image or colour.
@plavet
The tween on the main nav buttons is done with javascript. The script uses a timer to alter the opacity of a div inside the anchor on mouseover and mouseout. The div itself is inserted onload. If you view the page with Firefox with the web developer extension, and choose to ’view generated source’ you will see what I mean. The script makes use of a number of functions from my DOM library (/_assets/js/domLib.js). As you have found, it doesn’t require you to add extraneous tags to the markup and it degrades nicely with js turned off.
/* ====================================================================
ObjFader class
Author: Mark Croxton - www.hallmark-design.co.uk
Updated: 20.09.2007
==================================================================== */
// constructor
var ObjFader = function () {
// private vars
var self = this; // get the scope of the instantiated object
var links = new Array();
// public instance variables
this.CSSselector = '#masthead ul li a'; // anchor to which fade behaviour is to be applied
this.attachLinkBehavior = function () {
// Opera <9 does not support opacity, but despite that obj.style.opacity returns true...
// Mac Firefox >1.5 (and Camino) does support opacity, but it can trigger a Gheko rendering bug where Flash content disappears or flickers
if (!window.opera && !detect_macFF()) {
self.links = document.getElementsBySelector(self.CSSselector);
var i;
for (i=0;i<self.links.length;i++) {
addEvent(self.links[i],"mouseover",self.doOver_features(i),false);
addEvent(self.links[i],'mouseout',self.doOut_features(i),false);
addEvent(self.links[i],'click',self.doClick_features(i),false);
self.links[i].innerHTML += '<div></div>';
// DOM
//eDIV = document.createElement("div");
//self.links[i].appendChild(eDIV);
// set initial opacity
var obj = self.links[i];
var fadeDiv = obj.childNodes[obj.childNodes.length-1];
alphaControl.fade(fadeDiv,0,0,5);
}
}
}
this.doOver_features = function (myId) {
return function(e) {
self.doOver(e, myId);
}
}
this.doOut_features = function (myId) {
return function(e) {
self.doOut(e, myId);
}
}
this.doClick_features = function (myId) {
return function(e) {
self.doClick(e, myId);
}
}
this.doOver = function(e, objIndex) {
var obj = self.links[objIndex];
var fadeDiv = obj.childNodes[obj.childNodes.length-1];
alphaControl.fade(fadeDiv,40,0,4);
}
this.doOut = function(e, objIndex) {
var obj = self.links[objIndex];
var fadeDiv = obj.childNodes[obj.childNodes.length-1];
alphaControl.fade(fadeDiv,0,0,0);
}
// onClick is required by IE or it won't follow the link.
this.doClick = function(e, objIndex) {
window.location.href = self.links[objIndex];
}
}
//init
var myFader = new ObjFader();
addEvent(window, 'load', myFader.attachLinkBehavior, false);