Header Navigation Problems

[jcc5018]

Hey guys, I am working on trying to rebuild my website to make it a little cleaner and I am still having problems with my header/ navigational system. I want something that will be constant among all pages. I created a nice set of horizontal links using fireworks which has the UP/ Over/ Down/ and Down over state and it automatically imports a code that handles the roll over function. unfortunately, I have not been able to figure out how to set it up so that the active link will display depending on the page loaded. My plan is to make the header a separate php file that can be included into each of my pages so that I dont have to copy the code for each. My thought for how to make this work was to have some sort of code on each page that would identify it and the header would read that code and display the down state with the javascript code already included. I dont really know JS so trying to interpret the code from fireworks is difficult for me. And Although I know PHP a little, I'm not sure about how to go about using the includes and identifying the page loaded. I am hoping to use dreamweaver cs3 and making a template so that I can easily just plug the Header/ footer and content into the boxes and be set. here is the javascript code that was automatically inserted

// JavaScript Documentfunction 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_nbGroup(event, grpName) { //v6.0  var i,img,nbArr,args=MM_nbGroup.arguments;  if (event == "init" && args.length > 2) {    if ((img = MM_findObj(args[2])) != null && !img.MM_init) {      img.MM_init = true; img.MM_up = args[3]; img.MM_dn = img.src;      if ((nbArr = document[grpName]) == null) nbArr = document[grpName] = new Array();      nbArr[nbArr.length] = img;      for (i=4; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {        if (!img.MM_up) img.MM_up = img.src;        img.src = img.MM_dn = args[i+1];        nbArr[nbArr.length] = img;    } }  } else if (event == "over") {    document.MM_nbOver = nbArr = new Array();    for (i=1; i < args.length-1; i+=3) if ((img = MM_findObj(args[i])) != null) {      if (!img.MM_up) img.MM_up = img.src;      img.src = (img.MM_dn && args[i+2]) ? args[i+2] : ((args[i+1])? args[i+1] : img.MM_up);      nbArr[nbArr.length] = img;    }  } else if (event == "out" ) {    for (i=0; i < document.MM_nbOver.length; i++) {      img = document.MM_nbOver[i]; img.src = (img.MM_dn) ? img.MM_dn : img.MM_up; }  } else if (event == "down") {    nbArr = document[grpName];    if (nbArr)      for (i=0; i < nbArr.length; i++) { img=nbArr[i]; img.src = img.MM_up; img.MM_dn = 0; }    document[grpName] = nbArr = new Array();    for (i=2; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {      if (!img.MM_up) img.MM_up = img.src;      img.src = img.MM_dn = (args[i+1])? args[i+1] : img.MM_up;      nbArr[nbArr.length] = img;  } }}

one problem i have with this code is that I dont understand it, but also that when fireworks imported all the slices, it broke them up into a large number of boxes and stuff that I guess are used as spacers. I feel I could do the same thing by just having one picture with my logo, one for the colored bar underneath, and the rest as links, all placed in relative position to one another. To see what I'm talking about, you can check http://www.personal.psu.edu/jcc5018/start.htmI also really would like to set this up so that an appropriate title will be displayed above the links in that empty space, depending on the page loaded. I also plan to include a second row of links that will be placed over the red bars that will have the same effect. That is, the active link of both the red links as well as the active link in the second row will both be highlighted. The second row will change depending on the 1st level links.So if anyone is able to explain how to make this javascript code work for me, or If you know how to do it with PHP, I would really appreciate the help. Thanks

[justsomeguy]

It's not going to help a lot to use the Javascript function to change the image for the current page, once they mouse over that button it will revert to look like everything else. It would be better in PHP if you set the src to the correct image and remove the Javascript code on that button so that it doesn't do the mouse effects. You can use $_SERVER['REQUEST_URI'] to figure out which page they loaded and which button you want to change. You'll have to break up $_SERVER['REQUEST_URI'] to get only the page name, but it's in there.