Imagemap based navigation
This page may be hard to read in older browsers. If this is the case, please read the text-only version
if(document.getElementById){
//First map area
if(fstDay != ''){
document.getElementById('fst').href= fstTag.slice(3,26)+'';
}
//Previous map area
if(prvDay != ''){
document.getElementById('prv').href= prvTag.slice(3,26)+'';
}
//Next map area
if(nxtDay.length == 26){
document.getElementById('nxt').href= nxtTag.slice(3,11)+'';
}
if(nxtDay.length == 41){
document.getElementById('nxt').href= nxtTag.slice(3,26)+'';
}
}
else if(document.all){
//First map area
if(fstDay != ''){
document.all['fst'].href= fstTag.slice(3,26)+'';
}
//Previous map area
if(prvDay != ''){
document.all['prv'].href= prvTag.slice(3,26)+'';
}
//Next map area
if(nxtDay.length == 26){
document.all['nxt'].href= nxtTag.slice(3,11)+'';
}
if(nxtDay.length == 41){
document.all['nxt'].href= nxtTag.slice(3,26)+'';
}
}
//These lines generate a message to people with way out-of-date browsers that don't support this level of scripting.
//Feel free to change or delete.
else{
alert('Your browser is way, way out of date. Can you get Mozilla ( http://www.mozilla.org ), please?');
}
This script modifes the href's of an imagemap's areas to match whatever the navigtion tags (***next_day*** and the like) would produce.
1: Either copy and paste the code above and save the file as imagemaps.js, or grab the script from here. [right click > "save as"]
Upload the script into /images/ 2: Put the following between the <head> </head> tags:
-
<script type="text/javascript" language="JavaScript">
<!--
var fstDay='***first_day***';
var prvDay='***previous_day***';
var nxtDay='***next_day***';
//-->
</script>
<script language="JavaScript" src="/images/imagemaps.js"></script>
I haven't included an area for the tag as it only ever points to / (that is /index.html), so it can just be put in like any other areas you want to add.
-
<map name="map">
<area id="fst" shape="rect" href="#" coords="0,0,100,100">
<area id="prv" shape="rect" href="#" coords="540,0,640,100">
<area id="nxt" shape="rect" href="#" coords="0,380,100,480">
</map>
