daveWare Posted October 25, 2006 Share Posted October 25, 2006 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 comment Share on other sites More sharing options...
scott100 Posted October 25, 2006 Share Posted October 25, 2006 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 comment Share on other sites More sharing options...
daveWare Posted October 26, 2006 Author Share Posted October 26, 2006 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 comment Share on other sites More sharing options...
scott100 Posted October 26, 2006 Share Posted October 26, 2006 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 comment Share on other sites More sharing options...
daveWare Posted October 26, 2006 Author Share Posted October 26, 2006 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 comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now