Navigation

Button Rollovers with Individual Page Recognition

The Code:

JS Link in Head

Insert the JS link in the head of the document, then on each page you will create a variable that the script will read and this will tell it which button to "highlight" as the current page.

<script type="text/javascript" language="javascript" src="extscripts/navigationJS.js">
</script>

Individual JS for Variable - the page recognition

The code you would add to each page looks like this (obviously, the shadeImage number depends on what button you want hightlighted). This is the first button and the JS button array starts with zero so we feed zero to the external JS and to the mouseout JS:

<script type="text/javascript" language="javascript">
<!--// 
	shadeImage("zero");
	var pageName="zero";
//-->
</script>

External JS Code

Here is the actual script with explanation:

var imageName;  //this is the variable that is named on your page which
		contains the navigation buttons
var navigation=new Array();
if(document.images) {
for (i=0; i < 12; i++) {	//Build the image array
navigation[i] = new Image(); }
navigation[0].src="images/whoshade.gif";	//The shaded buttons
navigation[1].src="images/saveshade.gif";
navigation[2].src="images/newslettershade.gif";
navigation[3].src="images/currentprojectsshade.gif";
navigation[4].src="images/relatedshade.gif";
navigation[5].src="images/howshade.gif";
navigation[6].src="images/whoweare.gif";	//Non-shaded buttons
navigation[7].src="images/saveland.gif";
navigation[8].src="images/newsletter.gif";
navigation[9].src="images/currentprojects.gif";
navigation[10].src="images/relatedsites.gif";
navigation[11].src="images/how.gif";
}//end image array

function shadeImage(pageImage) {	//The function that swaps images for individual page recognition
//alert(imageName);
if(document.images){	//Makes sure the script won't bomb on old browsers
	if(pageImage=="zero") {
		document.images.zero.src = navigation[0].src
		imageName="zero" }
	else if(pageImage=="one") {
		document.images.one.src = navigation[1].src }
	else if(pageImage=="two") {
		document.images.two.src = navigation[2].src }
	else if(pageImage=="three") {
		document.images.three.src = navigation[3].src }
	else if(pageImage=="four") {
		document.images.four.src=navigation[4].src }
	else if(pageImage=="five") {
		document.images.five.src=navigation[5].src }
	}//end if
}//end function

//onMouseOver function
function showOn(imageName){
	if(document.images) {
		if(imageName=="zero") {
			document[imageName].src = navigation[0].src }
		else if(imageName=="one") {
				document[imageName].src = navigation[1].src }
			else if(imageName=="two") {
					document[imageName].src = navigation[2].src }
					else if(imageName=="three") {
						document[imageName].src = navigation[3].src }
							else if(imageName=="four") {
								document[imageName].src = navigation[4].src }
								else if(imageName=="five") {
									document[imageName].src = navigation[5].src }
}//end main if
}//end mouseOver function

//onMouseOut function
function showOff(imageName){
	if(document.images) {
		if(imageName=="zero") {
			document[imageName].src = navigation[6].src }
		else if(imageName=="one") {
				document[imageName].src = navigation[7].src }
			else if(imageName=="two") {
					document[imageName].src = navigation[8].src }
					else if(imageName=="three") {
						document[imageName].src = navigation[9].src }
							else if(imageName=="four") {
								document[imageName].src = navigation[10].src }
								else if(imageName=="five") {
									document[imageName].src = navigation[11].src }
}//end main if
}//end mouseOut function

The Button Code

<table cellpadding="0" cellspacing="1" border="0">
<tr><td>
      <a href="miniJavascripts.html#pagerec" onmouseover="showOn('zero')"
onmouseout="javascript: if (pageName!='zero') { showOff('zero')};"><img src="images/whoweare.gif" width="120" height="25" border="0" name="zero" alt="Who we are" /></a>
</td></tr>
<tr><td>
       <a href="indexsaveland.shtml" onmouseover="showOn('one')"
onmouseout="javascript: if (pageName!='one') { showOff('one')};"><img src="images/saveland.gif" width="120" height="25" border="0" name="one" alt="Saving your land" /></a>
</td></tr>
<tr><td>
       <a href="indexnewsletter.shtml" onmouseover="showOn('two')"
onmouseout="javascript: if (pageName!='two') { showOff('two')};"><img src="images/newsletter.gif" width="120" height="25" border="0" name="two" alt="Newsletters" /></a>
</td></tr>
<tr><td>
       <a href="indexfocusareas.shtml" onmouseover="showOn('three')"
onmouseout="javascript: if (pageName!='three') { showOff('three')};"><img src=
      "images/currentprojects.gif" width="120" height="25" border="0" name=
      "three" alt="Focus Areas" /></a>
</td></tr>
<tr><td>
       <a href="indexrelatedsites.shtml" onmouseover="showOn('four')"
onmouseout="javascript: if (pageName!='four') { showOff('four')};"><img src="images/relatedsites.gif"
      width="120" height="25" border="0" name="four" alt="Related sites" /></a>
</td></tr>
<tr><td>
       <a href="indexhowtojoin.shtml" onmouseover="showOn('five')"
onmouseout="javascript: if (pageName!='five') { showOff('five')};"><img src="images/how.gif" width="120" height="25" border="0" name="five" alt="How to join" /></a>
</td></tr>
</table>