Jump to content

Image based navigation


Recommended Posts

Hello,I'm hoping someone can help me. I'm using the following script to pre-cache my nav images and create the rollovers for a site I'm working on. I'd like to identify the current page by activating the on state and disabling the onMouseOver event, but I'm having trouble putting the code together. I can do it manually by placing the on image and removing the call for the onMouseOver event, but I'd rather have some code that does it automatically.You can see the nav here: http://www.fullcp.com/test/My current line of thinking, is an if statement that uses either the body id or the url to stop the setImage function. I'm just not sure how to go about doing it.Create an array and list the different pages? If document.URL is equal to array return false?Thanks for your help.Dave

 //Pre-Cache the imagesvar navItem = new Array();	navItem[0] = "nav_home";	navItem[1] = "nav_contact";	navItem[2] = "nav_residences";	navItem[3] = "nav_urban";	navItem[4] = "nav_amenities";	navItem[5] = "nav_lifestyle";	navItem[6] = "nav_location";	navItem[7] = "nav_about";	navItem[8] = "nav_news";	navItem[9] = "nav_enews";	if (document.images) {	var imageOff = new Object();	for (i=0; i<navItem.length; i++) {		imageOff[navItem[i]] = new Image(24, 130);		imageOff[navItem[i]].src = "images/"+navItem[i]+".gif";		}	var imageOn = new Object();		for (h=0; h<navItem.length; h++) {		imageOn[navItem[h]] = new Image(24, 130);		imageOn[navItem[h]].src = "images/"+navItem[h]+"-over.gif";		}}//Swap image functionfunction setImage(imgID, type) {	if (document.images) {		if (type == "on") {			document.getElementById(imgID).src = imageOn[imgID].src;			return true;		} else if (type == "off") {			document.getElementById(imgID).src = imageOff[imgID].src;			return true;			}		}		return false;	}

Link to post
Share on other sites
My current line of thinking, is an if statement that uses either the body id or the url to stop the setImage function. I'm just not sure how to go about doing it.Create an array and list the different pages? If document.URL is equal to array return false?
Yeah you have the right idea, if you give each body an id similar to the image then you can find out what page the user is on and if the image should rollover.So say were on the news page, you would give the body tag an id simar to the id for the news img (i had to add b to make the id's unique):<body id="nav_newsb"><li><img src="images/nav_news.gif" alt="Link to the Shipyards In The News Page" id="nav_news"then in your javascript-----------if (type == "on") {var bodyID= document.getElementsByTagName("body")[0].id; //get id of body tag if (bodyID==imgID+"b"){};else{document.getElementById(imgID).src = imageOn[imgID].src;}// checks body id against the image id (not forgetting to add the "b" to end) rollover if match is falsereturn true; }-----------I hope this makes sense :) b can be anything you like - just as long as id's are uniqueI tried it and it did work, there may well be another better way...
Link to post
Share on other sites

That was great! Just the push I needed. Thank you. I'm now getting the desired effect: http://www.fullcp.com/test/My code ended up a little different. I tried moving the variable so it could be accessed by other functions but the script didn't like it. Any suggestions on cleaning up the code?Right now the script is breaking my css and not displaying correctly in IE6. the test looks fine but the page is messed up. anyone see anything obvious? I'll have to troubleshoot it tomorrow. Dave

// Full Circle Navigation: JavaScript Document//Pre-Cache the imagesvar navItem = new Array();	navItem[0] = "nav_home";	navItem[1] = "nav_contact";	navItem[2] = "nav_residences";	navItem[3] = "nav_urban";	navItem[4] = "nav_amenities";	navItem[5] = "nav_lifestyle";	navItem[6] = "nav_location";	navItem[7] = "nav_about";	navItem[8] = "nav_news";	navItem[9] = "nav_enews";	if (document.images) {	var imageOff = new Object();	for (i=0; i<navItem.length; i++) {		imageOff[navItem[i]] = new Image(24, 130);		imageOff[navItem[i]].src = "images/"+navItem[i]+".gif";		}	var imageOn = new Object();		for (h=0; h<navItem.length; h++) {		imageOn[navItem[h]] = new Image(24, 130);		imageOn[navItem[h]].src = "images/"+navItem[h]+"-over.gif";		}}//Set the Current Page in the navfunction setPage() {		var bodyID = document.getElementsByTagName("body")[0].id; //Get the body ID 	if (document.images) {		for (x=0;x<navItem.length;x++) {			if ("nav_"+bodyID == navItem[x]) {				document.getElementById(navItem[x]).src = imageOn[navItem[x]].src				//document.write(navItem[x] + "<br />");			}		}	}	return false;}	//Swap image functionfunction setImage(imgID, type) {	if (document.images) {		if (type == "on") {			var bodyID = document.getElementsByTagName("body")[0].id; //Get the body ID 			if ("nav_"+bodyID == imgID) {} else {					document.getElementById(imgID).src = imageOn[imgID].src;					}			return true;		} else if (type == "off") {			var bodyID = document.getElementsByTagName("body")[0].id; //Get the body ID 			if ("nav_"+bodyID == imgID) {} else {					document.getElementById(imgID).src = imageOff[imgID].src;					}			return true;			}		}		return false;	}

Link to post
Share on other sites
My code ended up a little different. I tried moving the variable so it could be accessed by other functions but the script didn't like it. Any suggestions on cleaning up the code?
No probs :) If you define the bodyID variable outside all functions then each should be able to access it.// Full Circle Navigation: JavaScript Documentvar bodyID = document.getElementsByTagName("body")[0].id;//Pre-Cache the imagesNote:If you specify var bodyID in a function then no other function can access it, if you just use bodyID then the variable can be access by all functions.
Link to post
Share on other sites

Thats what I thought. But when I move the variable up and comment out the dupes, the script breaks. Go figure. :) On a better note. If I strip out the onload function I created and just go with your code it works and is stable in IE6, Safari and Firefox. :) Thanks again,Dave

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...