erratic

Skittlish Tips'n'Tricks

• Change the classes for the body tag to set your default site style. also change these in the app.js file (line 66).
• Remove the scripts and the #options div if you don't want the option switcher.
• The top menu shows the home section and the sections that are not blogs.
• Email me at evil@che.lu if you have any questions.
• Happy hacking!

The document object model is sweet, sweet nectar dripping from the bosoms of the gods. The supa-genius cats who whipped that shit up are rock solid, grade A badassmotherfuckers.

It’s like this, all you gotta do to interact with the areas of your image map is a little javascript:

var map = document.getElementsByTagName('area');

Now there’s an objectHTMLCollection , or if you prefer, an array named map containing all of the area tags in the document. My page has 6 area tags. I can read the id attribute from any of the objects in the map array by using the index like this:

map[0].id

The above would return:

northamerica

which is AWESOME! You’ll see why in a second.

Next up is to access and alter the background of the invisible gif I’m using as a mask to show small sections of the HUGE background image that contains all of the over states for my image map links.

I’ve conveniently given my transparent gif the id of mapimg so all I have to do to play with it is:

mapbg = document.getElementById('mapimg');

Now I have my transparent gif and it’s attributes all tucked inside my mapbg variable ready to be fondled and violated. Violate it I will.

I’m going to take the id from the area my mouse is over in the map array and use it to alter the className in my mapbg object.

Now the AWESOME part: the id ’s in my area ’s have corresponding classes in my css file! So by looping through my map array I can get the relevant area and feed it to the hungry ‘onmouseover’ and ‘onmouseout’ event handlers:

function readMap ()
 {
     var map, i;
     // get array of map area tags
     map = document.getElementsByTagName('area');
     for(i=0;i<map.length;i++)
     {
     map[i].onmouseover=function(){shift(this);};
     map[i].onmouseout=function(){shift(this);};
     }
 }

And then hand things over to the shift function for some background repositioning madness:

function shift (o)
 {
     var mapbg, id;
     id = o.id;
     mapbg = document.getElementById('mapimg');
    if(id == mapbg.className){
     mapbg.className = 'mapbase'; 
    }else{
     mapbg.className = id;
     }
 }

First up after I initialize my var’s is to grab the id attribute from where the mouse is and give it to a variable named id. The o* in that line is where ever the mouse is hovering on the image map. It was passed from *this inside our readMap function.

Then I get the current state of the image map’s background and test to see if I need to un-hover by seeing if my id and my className match. If they don’t I rewrite the className (class) of the transparent gif with the id attribute of the area the mouse is over.

So when you roll over North America:

<img src="spacer.gif" usemap="#Map" class="mapbase" id="mapimg" />

Would become:

<img src="spacer.gif" usemap="#Map" class="northamerica" id="mapimg" />

and so on… It won’t work if I don’t call the function when the page is loaded:

 window.onload=function(){
  readMap();
 }

The next iteration of this script would be to capture the initial class attribute of the transparent gif and store that for testing instead of hardcoding the default class value into the if statement of the shift function. Then the only thing needing to be changed to use this code with any image map is the getElementById() id value. As long as you have a corresponding class for each area’s id value it should travel from page to page rather painlessly.

Any comments from people smarter than me would rock as I’m new to this DOM/Javascript gig.