Jump to content

Reusing Navigational Bar


Elemental

Recommended Posts

Hey Folks, Happy "Cinco de Mayo" for those who celebrate it...I would like to re-use the all image navigational bar that's on the Top of the page, on the Bottom of the page. I tried changing the names of the Event Handlers and of the Variables but that didn't seem to work as expected.For example: I changed all the MM to BNB (functions and events) and I added an a to the end of all the vairable names so;

function MM_swapImgRestore() { //v3.0  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;}Became:function BNB_swapImgRestore() { //v3.0  var ia,xa,aa=document.BNB_sr; for(ia=0;aa&&ia<aa.length&&(xa=aa[ia])&&xa.oSrc;ia++) xa.src=xa.oSrc;}and so on

when I add the second navigational bar I lose the onRollOver Events.FYI: The site was created with Dreamweaver and I think the regions are locked, if that should make a difference???What am I doing wrong or not getting at all? Can you guys point me in the right direction?The Functions:

<script language="JavaScript" type="text/JavaScript"><!--function MM_swapImgRestore() { //v3.0  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;}function MM_preloadImages() { //v3.0  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();	var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)	if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}}function MM_findObj(n, d) { //v4.01  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {	d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);  if(!x && d.getElementById) x=d.getElementById(n); return x;}function MM_swapImage() { //v3.0  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}}--></style>

The navBar

<! **** Begin navBar and Center Leaf Image **** //--><table  border="0" cellspacing="0" cellpadding="0"><tr align="left" valign="top"><td><img src="images/leaf_center.jpg" width="150" height="23"></td><td><img src="images/home-over.jpg" name="homed" width="47" height="23" id="homed"></td><td><a href="services.htm" onMouseOut="MM_swapImgRestore() "onMouseOver="MM_swapImage('services','','images/services-over.jpg',1)"><img src="images/services.jpg" alt="services" name="services" width="79" height="23" border="0"></a></td><td><a href="news.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('news','','images/newsletters-over.jpg',1)"><img src="images/newsletters.jpg" alt="newsletters" name="news" width="101" height="23" border="0"></a></td><td><a href="estimate.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('estimate','','images/estimate-over.jpg',1)"><img src="images/estimate.jpg" alt="free estimate" name="estimate" width="101" height="23" border="0"></a></td><td><a href="greentips.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('about','','images/greentips-over.jpg',1)"><img src="images/greentips.jpg" alt="about us" name="about" width="82" height="23" border="0"></a></td><td><a href="about.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('employees','','images/about-over.jpg',1)"><img src="images/about.jpg" alt="our employees" name="employees" width="80" height="23" border="0"></a></td><td><a href="testimonials.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('testimonials','','images/testimonials-over.jpg',1)"><img src="images/testimonials.jpg" alt="testimonials" name="testimonials" width="100" height="23" border="0"></a></td><td><a href="moreabout.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('didyouknow','','images/moreabout-over.jpg',1)"><img src="images/moreabout.jpg" alt="did you know" name="didyouknow" width="127" height="23" border="0"></a></td><td><a href="contact.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('contact','','images/contact-over.jpg',1)"><img src="images/contact.jpg" alt="contact us" name="contact" width="90" height="23" border="0"></a></td></tr></table><! **** End navBar **** //-->

Peace,Elemental

Link to comment
Share on other sites

The swap image functions are generic, you don't need to redefine those to use them somewhere else, they aren't specifically tied to the header or anything else. It looks like the MM_swapImage function only uses the first and third parameters, so it looks like the first parameter is the name of the image you want to change, and the third parameter is the new URL to change it to. The MM_swapImgRestore function just replaces the previous swap, wherever it was.

Link to comment
Share on other sites

The swap image functions are generic, you don't need to redefine those to use them somewhere else, they aren't specifically tied to the header or anything else. It looks like the MM_swapImage function only uses the first and third parameters, so it looks like the first parameter is the name of the image you want to change, and the third parameter is the new URL to change it to. The MM_swapImgRestore function just replaces the previous swap, wherever it was.
justsomeguy, What's Up Ninja Warrior!?Thanks for the reply. I'm understand the functions, what they are doing, I get that, but what I don't understand is the why the rollOver states stop working when I add the second Navigational Bar.I thought since I was using the same NavBar, twice, on the same page (one at the Top of the page the other at the Bottom of the page) that was causing the problem.Are you telling me that, that's not the case? If so, then are you saying just change the variable names for the second NavBar?Peace,Elemental
Link to comment
Share on other sites

It's probably the element names:<img src="images/estimate.jpg" alt="free estimate" name="estimate" width="101" height="23" border="0">If you've got more than one element with the same name the Javascript might have issues.

Link to comment
Share on other sites

It's probably the element names:<img src="images/estimate.jpg" alt="free estimate" name="estimate" width="101" height="23" border="0">If you've got more than one element with the same name the Javascript might have issues.
justsomeguy, Ah, so, great one. You have enlighten this simple warrior. Your mastery of the art of JavaScript is unequaled.Peace,Elemental
Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...