Jump to content

Navbar Puzzle

Jay_Stealth
 Share

Recommended Posts

Jay_Stealth

Jay_Stealth

Posted
Posted

ok ive built a site ( http://www.team-matrix.co.uk ) and my navbar is slow with the rollovers. I created the whole navbar in fireworks mx then exported it with html and the slices ready for dreamweaver which i then imported it into. There are 3 states on each button normal/over/down each with an alt message and a status bar message. Fireworks exported the original image in the nav_r1_c1.gif nav_r1_c2.gif format at around 115 bytes for each image but the images that it is using for the over and down state it just linked as they were already created. i can only get these to 330 bytes with ok image quality. This should still be small enough not to slow down the rollover effect tho, ive also tried to cut down the filesize in photoshop 7 but no hope either. All of the images can be found at http://www.team-matrix.co.uk/images . The code for the nave bar is in 3 parts, the script/ the preload images part and the actuall code for the table.

Heres the script that goes into the head ..

<script language="JavaScript" type="text/JavaScript">
<!--
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_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;
  } }
}

function MM_displayStatusMsg(msgStr) { //v1.0
  status=msgStr;
  document.MM_returnValue = true;
}
//-->
</script>

The Body tag...

<body background="/images/bg.jpg" leftmargin="0" topmargin="0" rightmargin="0" bottommargin="0" onLoad="MM_preloadImages('images/home_down.gif','images/home_over.gif','images/events_down.gif','images/events_over.gif','images/news_down.gif','images/news_over.gif','images/forums_down.gif','images/forums_over.gif','images/newsletter_down.gif','images/newsletter_over.gif','images/galleries_down.gif','images/galleries_over.gif','images/links_down.gif','images/links_over.gif')">

and the table itself...

<table border="0" cellpadding="0" cellspacing="0" width="672">
              <tr> 
          <td><a href="index.htm" target="_top" onClick="MM_nbGroup('down','navbar1','nav_r1_c1','images/home_down.gif',1);" onMouseOver="MM_displayStatusMsg('[ HOME !! ]');MM_nbGroup('over','nav_r1_c1','images/home_over.gif','images/',1);return document.MM_returnValue" onMouseOut="MM_nbGroup('out');"><img name="nav_r1_c1" src="images/nav_r1_c1.gif" width="96" height="20" border="0" alt="[ HOME !! ]"></a></td>
          <td><a href="events.htm" target="_top" onClick="MM_nbGroup('down','navbar1','nav_r1_c2','images/events_down.gif',1);" onMouseOver="MM_displayStatusMsg('[ ALL ABOUT UPCOMING EVENTS !! ]');MM_nbGroup('over','nav_r1_c2','images/events_over.gif','images/',1);return document.MM_returnValue" onMouseOut="MM_nbGroup('out');"><img name="nav_r1_c2" src="images/nav_r1_c2.gif" width="96" height="20" border="0" alt="[ WHATS ON !? ]"></a></td>
          <td><a href="news.php" target="_top" onClick="MM_nbGroup('down','navbar1','nav_r1_c3','images/news_down.gif',1);" onMouseOver="MM_displayStatusMsg('[ LATEST CLUBBING NEWS !! ]');MM_nbGroup('over','nav_r1_c3','images/news_over.gif','images/',1);return document.MM_returnValue" onMouseOut="MM_nbGroup('out');"><img name="nav_r1_c3" src="images/nav_r1_c3.gif" width="96" height="20" border="0" alt="[ LATEST CLUBBING NEWS !! ]"></a></td>
          <td><a href="/forums/index.php" target="_top" onClick="MM_nbGroup('down','navbar1','nav_r1_c4','images/forums_down.gif',1);" onMouseOver="MM_displayStatusMsg('[ POST IN OUR COOL FORUMS !! ]');MM_nbGroup('over','nav_r1_c4','images/forums_over.gif','images/',1);return document.MM_returnValue" onMouseOut="MM_nbGroup('out');"><img name="nav_r1_c4" src="images/nav_r1_c4.gif" width="96" height="20" border="0" alt="[ POST IN OUR COOL FORUMS !! ]"></a></td>
          <td><a href="newsletter.php" target="_top" onClick="MM_nbGroup('down','navbar1','nav_r1_c5','images/newsletter_down.gif',1);" onMouseOver="MM_displayStatusMsg('[ SIGN UP TO OUR WEEKLY NEWSLETTER !! ]');MM_nbGroup('over','nav_r1_c5','images/newsletter_over.gif','images/',1);return document.MM_returnValue" onMouseOut="MM_nbGroup('out');"><img name="nav_r1_c5" src="images/nav_r1_c5.gif" width="96" height="20" border="0" alt="[ SIGN UP TO OUR WEEKLY NEWSLETTER !! ]"></a></td>
          <td><a href="/gallery/" target="_top" onClick="MM_nbGroup('down','navbar1','nav_r1_c6','images/galleries_down.gif',1);" onMouseOver="MM_displayStatusMsg('[ SEE UPLOADED PICS OF EVENTS !! ]');MM_nbGroup('over','nav_r1_c6','images/galleries_over.gif','images/',1);return document.MM_returnValue" onMouseOut="MM_nbGroup('out');"><img name="nav_r1_c6" src="images/nav_r1_c6.gif" width="96" height="20" border="0" alt="[ SEE UPLOADED PICS OF EVENTS !! ]"></a></td>
          <td><a href="links.htm" target="_top" onClick="MM_nbGroup('down','navbar1','nav_r1_c7','images/links_down.gif',1);" onMouseOver="MM_displayStatusMsg('[ SEE OUR COOL LINKED SITES ]');MM_nbGroup('over','nav_r1_c7','images/links_over.gif','images/',1);return document.MM_returnValue" onMouseOut="MM_nbGroup('out');"><img name="nav_r1_c7" src="images/nav_r1_c7.gif" width="96" height="20" border="0" alt="[ SEE OUR COOL LINKED SITES ]"></a></td>
          <td><img src="images/spacer.gif" width="1" height="20" border="0" alt=""></td>
        </tr>
      </table>

The funny thing is that before if i simply create a webpage with just the navbar it works ok its only when i integrate it things slow down :).

Anyone any ideas?Cheers in advance Jay


FthrJACK

FthrJACK

Posted
Posted

Make the images in fireworks and build the rollovers in Dreamweaver, the rollover wizard in there usually gives a nice rollover effect. also try do a preload images in your page header

Jay_Stealth

Jay_Stealth

Posted
  • Author
Posted

not used dreamweaver to do rollovers in before but im guessing that it will write them same as fireworks does and the images are allready preloaded if u check the post :)

  • 1 month later...
Jay_Stealth

Jay_Stealth

Posted
  • Author
Posted

heh i slapped the images into imageready and redid the rollovers and for some reason the JS that imageready wrote was like uber fast compared to fireworks, probelem sorted :)

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...