Jump to content

Navigation Rollovers help please........


deansp2001

Recommended Posts

Hi

 

I am trying to make a navigation bar for my site. I know how to make one that has rollovers when the mousr hovers over the image. What I need to know is how to make one that does this but when the user clicks on that link the rollover image changes to the rollover image and stays like that. Sorry for the long winded explaination but for the life of me I cant find the right "term" for what this is called and therefore cant find anything on the net about it! Ive tried using the Dreamweaver "navigation bar" element but that doesnt seem to do what im after.

 

Thanks.

Link to comment
Share on other sites

OK, thank you. Here you go:

 

Javascript:

 

<script 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_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_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];}
}
//-->
</script>

 

HTML:

 

<table width="673" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td><a href="index.html"><img src="images/nav_05.png" alt="Home" width="112" height="27" border="0" id="Image1" onmouseover="MM_swapImage('Image1','','images/nav2_05.png',1)" onmouseout="MM_swapImgRestore()" /></a></td>
            <td><a href="latestevents.html"><img src="images/nav_06.png" alt="Latest_Events" width="112" height="27" border="0" id="Image2" onmouseover="MM_swapImage('Image2','','images/nav2_06.png',1)" onmouseout="MM_swapImgRestore()" /></a></td>
            <td><a href="topselling.html"><img src="images/nav_07.png" alt="Top_Selling" width="112" height="27" border="0" id="Image3" onmouseover="MM_swapImage('Image3','','images/nav2_07.png',1)" onmouseout="MM_swapImgRestore()" /></a></td>
            <td><a href="venues.html"><img src="images/nav_08.png" alt="Venues" width="112" height="27" border="0" id="Image4" onmouseover="MM_swapImage('Image4','','images/nav2_08.png',1)" onmouseout="MM_swapImgRestore()" /></a></td>
            <td><a href="frontrow.html"><img src="images/nav_09.png" alt="Front_Row" width="112" height="27" border="0" id="Image5" onmouseover="MM_swapImage('Image5','','images/nav2_09.png',1)" onmouseout="MM_swapImgRestore()" /></a></td>
            <td><a href="contact.html"><img src="images/nav_10.png" alt="Contact" width="113" height="27" border="0" id="Image6" onmouseover="MM_swapImage('Image6','','images/nav2_10.png',1)" onmouseout="MM_swapImgRestore()" /></a></td>
          </tr>
        </table>

Link to comment
Share on other sites

you do not need js for this you are refering to a php menu when they click on a licnk the page you are on the link is different that the others like ith a tab menu. like http://www.mootools.net.

 

is this what you are meaning?

 

if so its a simple thing in php using if statments if you ask in the php forums they should be able to assist you

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

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.   Restore formatting

  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.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.