• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2107
  • Last Modified:

onMouseClick (onMouseOver, OnMouseOut and swapImgRestore)

Hello Experts,

In the HTML header  that is loaded dynamically for each website page (<!--#include file='./headerpage.html'-->) I have the following code that controls navigation tab menu for my website.
The problem is when the site visitors click on one of the link images they are redirected to the correct page but once they move mouse away from the menu / image all images are reset and they cannot tell which website tab they are currently on. How can I modify this code, so for example, when a visitors clicks on the Consulting tab they are redirected to the correct page and the consulting image is changed from m3.jpg to m3_1.jpg while the rest of the menu images remain in their default mX.jpg. at the same time I still want to keep onMouseOver, onMouseOut and swapImgRestore functions.

These are the states that I want to have.

1.      Mouse is over an image - swap the image.
2.      Mouse out - reset all (5) images to default images.
3.      Onclick - execute <a href> to a page and keep that link image in the menu bar in the swapped state.
4.      Onclick to another link - reset tab menu images to the default and swap the link image for the current page to mX_1.jpg.




<a href="Default.asp" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image4','','images/m1_1.jpg',1)"><img src="images/m1.jpg" alt=" " name="Image4" width="182" height="30" border="0"></a>

<a href="BusinessValuations.asp" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image5','','images/m2_1.jpg',1)"><img src="images/m2.jpg" alt=" " name="Image5" width="185" height="30" border="0"></a>

<a href="Consulting.asp" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image6','','images/m3_1.jpg',1)"><img src="images/m3.jpg" alt=" " name="Image6" width="116" height="30" border="0"></a>

<a href="OurPartners.asp" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image7','','images/m4_1.jpg',1)"><img src="images/m4.jpg" alt=" " name="Image7" width="126" height="30" border="0"></a>

<a href="KnowledgeCenter.asp" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image8','','images/m5_1.jpg',1)"><img src="images/m5.jpg" alt=" " name="Image8" width="173" height="30" border="0"></a>


I apologize if my explanation is too confusing, if you willing to help please let me know which part I was unclear about and I will try to reword it better.

Thanks for your help.
0
deep06
Asked:
deep06
  • 2
1 Solution
 
Gurvinder Pal SinghCommented:
Please share the existing code.

0
 
deep06Author Commented:
Headerpage.html Code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Website</title>


<link href="style.css" type="text/css" rel="stylesheet">
<script type="text/JavaScript" src="top.js"></script>

</head>

<body onLoad="MM_preloadImages('images/m1_1.jpg','images/m2_1.jpg','images/m3_1.jpg','images/m4_1.jpg','images/m5_1.jpg')">

<table style="width:820px" align="center">
      <tr>
            <td>
                  <div class="topBar">
                        <a href="Contact.asp">Contact Us</a>&nbsp<img src="images/vert_line.jpg" width="2" height="8" hspace="5">&nbsp
                        <a href="BrokersBlog.asp">Broker's Blog</a>&nbsp<img src="images/vert_line.jpg" width="2" height="8" hspace="5">&nbsp
                        <a href="News.asp">News</a>
                  </div>
            </td>
      </tr>            
      <tr>
            <td>
            <table>
                  <tr>
                        <td class="head_top"><a href="Default.asp">
                        <img src="images/logo.gif" alt="" border="0"></a><br>
                        </td>
                  </tr>

                  <tr>
                        <td class="head_bottom">
                        <a href="Default.asp" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image4','','images/m1_1.jpg',1)">
                        <img src="images/m1.jpg" alt=" " name="Image4" width="182" height="30" border="0"></a><a href="BusinessValuations.asp" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image5','','images/m2_1.jpg',1)"><img src="images/m2.jpg" alt=" " name="Image5" width="185" height="30" border="0"></a><a href="Consulting.asp" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image6','','images/m3_1.jpg',1)"><img src="images/m3.jpg" alt=" " name="Image6" width="116" height="30" border="0"></a><a href="OurPartners.asp" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image7','','images/m4_1.jpg',1)"><img src="images/m4.jpg" alt=" " name="Image7" width="126" height="30" border="0"></a><a href="KnowledgeCenter.asp" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image8','','images/m5_1.jpg',1)"><img src="images/m5.jpg" alt=" " name="Image8" width="173" height="30" border="0"></a></td>
                  </tr>
            </table>
            </td>
      </tr>
      <tr>
            <td>
            <table bgcolor="#F8F8F8">
                  <tr>
                        <td style="height:20px"></td>
                  </tr>
                  <tr>
                        <td>





Code in top.js file

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];}
}

Code for one of the pages. Right now it only has "Coming Soon" message in the body of the page and it simply loads headerpage.html and footerpage.html files.

<!--#include file='./headerpage.html'-->
COMING SOON
<!--#include file='./footerpage.html'--></p>


0
 
rdivilbissCommented:
http://www.rodsdot.com/javascript/Mouseover-Mouseclick-Selected-Menu1.asp

Code is real JavaScript, not MM_created stuff.  Hopefully you can learn to do this without using a crutch, e.g. the MM generated code, which you won't totally understand because they don't want you to. They want you to be tied to their program and not able to fend for yourself.

Codes on the page.
0
 
deep06Author Commented:
rdivilbiss: thanks for your response. It was helpful but we found another solution to our problem.
0

Featured Post

Receive 1:1 tech help

Solve your biggest tech problems alongside global tech experts with 1:1 help.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now