This is a full explaination of how to make your life simpler and easier using javascript to make rollovers. It may look like alot but, this will seperate the content from the behavior and make complex tasks much more easier.
This is a function that handles browsers differences when handling events. Just make sure to include it in the javascript doc or externally link it. I'm not going to explain but, basically stated different browsers call something that does pretty much the exact same thing as another by a different name with different parameters. So this function takes care of that cross browser difference essentially. So all you need to do is call this function to add a listener.
elm - stands for the node
evType - stands for the event type
fn - is the function to handle the event when it occurs
- useCapse isn't all that important at this point so I'm not going to explain it.
function addEvent(elm,evType,fn,useCapture) {
if(elm.addEventListener) {
elm.addEventListener(evType,fn,useCapture);
return true;
} else if(elm.attachEvent) {
var r = elm.attachEvent('on'+evType,fn);
return r;
} else {
elm['on'+evType]=fn;
}
The rest of code is used to register the listeners with the appropriate node and assign a handler to the each listener. A handler will handle the event when the node detects the event which it is listening for. Since, what happens is that the object- in this case the img will detect a mouseover or mouseout event- then the listener will send that event handler. The event itself is a seperate object tht contains info on what object/node fired the event and other more usefull things that I won't get into. So each handling function(out & over) have to first find the browser then use the appropriate attribute to find what what object fired the event. Since, the event is a seperate object itself. The code between the /**/ is ommited code that explains what each statement does in particular where they are included.
/* function that handles cross-browser differences for events */
function addEvent(elm,evType,fn,useCapture) {
if(elm.addEventListener) {
elm.addEventListener(evType,fn,useCapture);
return true;
} else if(elm.attachEvent) {
var r = elm.attachEvent('on'+evType,fn);
return r;
} else {
elm['on'+evType]=fn;
}
/*function called when the html page is loaded- We can only find the nodes we are looking for if the page is loaded into the browser. otherwise they will not be rendered yet */
window.onload = function() {
load_listeners();
}
/*This function attaches the listeners to the nodes*/
function load_listeners() {
var nav = document.getElementById("navigation"); //get the navigation node
var list = nav.getElementsByTagName("li"); //get array of all children li nodes
for(var i=0; i < list.length; i++) { //loop through list node
list[i].link = list.getElementsByTagName('a')[0]; // find the a node and assign
list[i].images = list[i].link.getElementsByTagName('img')[0]; //find the image
addEvent(list[i].image, 'mouseover',over,false); // attach eventlistener
addEvent(list[i].image, 'mouseout', out,false); // attach eventlistener
}
}
/*function that is called listener to handle the event of mouseover */
function over(e) {
var el;
if(window.event && window.srcElement)
el = window.event.srcElement;
if(e && e.target)
el = e.target;
While(el.nodeName.toLowerCase() != 'img' && el.nodeName.toLowerCase() != 'body')
el = el.parentNode;
if(el.nodeName.toLowerCase() == 'body');
return;
/* very important
The first statement gets the attribute value of alt. The alt value should be named the same thing as the image which you want to swap. For instance, if the image is named home- then you set the alt value of the image to home.*/
var what_over = el.getAttribute('alt');
/*This statment creates a string that is composed of the images location to be swapped*/ First the folder location is put in a string then the what_over variable with the name is added to the string- then the image type is added. The end result is a string like: "images/navigation/rollovers/home,gif". This string is then assigned to the var swap_image.*/
var swap_over = "images/navigation/rollovers/"+ what_over + '.gif';
/*The last part is to swap the image by rerouting the images src to the swap_over image location. You do this by assigning the images(el) src attribute to swap_over- the string with the new images location*/
el.src = swap_over;
}
/* that step ends this handling method for a mouse over*/
/*now we need to handle the mouseout- so we do this in a new function doing the same exact thing but, changing the swap_image to the location of the origional image.*/
function out(e) {
var el;
if(window.event && window.srcElement)
el = window.event.srcElement;
if(e && e.target)
el = e.target;
While(el.nodeName.toLowerCase() != 'img' && el.nodeName.toLowerCase() != 'body')
el = el.parentNode;
if(el.nodeName.toLowerCase() == 'body');
return;
var what_out = el.getAttribute('alt');
var swap_out = "images/navigation/main/"+ what_out +'.gif';
el.src = swap_out;
}
Then you would save this file as something like listener.js and link it externally to the html like highlighted below. I also included the full mark up to show you how this works. Now everything has been seperated and it is much easier to pin point problem areas then intergrating the javascript into the body of the document.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Fugh Animation</title>
<meta http-equiv="content-type"
content="text/html; charset=utf-8" />
<script language="javascript" type="text/javascript" src="javascript/listeners.js"></script>
<link rel="stylesheet" type="text/css" href="fugh.css" />
</head>
<body>
<div id="container">
<div id="banner">
<img src="images/banner/banner.gif" />
</div> <!-- banner -->
<div id="navigation">
<ul id="main_navigation">
<li><a href=""><img src="images/main_navigation/links/about.gif" alt="about" width="76" height="20" /></a></li>
<li><a href=""><img src="images/main_navigation/links/production_notes.gif" alt="production_notes" width="205" height="20" /></a></li>
<li><a href=""><img src="images/main_navigation/links/script.gif" alt="script" width="75" height="23" /></a></li>
<li><a href=""><img src="images/main_navigation/links/storyboards.gif" alt="storyboards" width="159" height="26" /></a></li>
<li><a href=""><img src="images/main_navigation/links/art_direction.gif" alt="art_direction" width="153" height="24" /></a></li>
<li><a href=""><img src="images/main_navigation/links/animatic.gif" alt="animatic" width="109" height="21" /></a></li>
<li><a href=""><img src="images/main_navigation/links/contact.gif" alt="contact" width="103" height="18" /></a></li>
</ul>
</div> <!-- navigation -->
<div id="content">
</div> <!-- content -->
</div> <!-- container -->
</body>
</html>
So basically, by using the alt value of the image you can swap the appropriate image without adding a new class or some other useless attribute to the image. It also condenses javascript becasue instead of registering a event listener with every node instead we can just loop through all them and assign them a "general" handler. Then based the one image the alt attribute can be checked for what image is going to be swaped. The only downside(or upside maybe) is that you need to include have a seperate folders for your main images and rollovers. Since, they are named the same thing. However, you could add another part onto the source string as well and store them in the same location- something like:
var swap_over = "images/navigation/"+ what_over+"_rollover" + '.gif';
This way you can store all your images that make up the navigation and its rollover states in the same location, rather then seperate folders and just add _rollover to the main name. Then add it in the string to create the src.
hope that wasn't to much… sometimes i get of on a tangent,lol-sorry.