Link to home
Start Free TrialLog in
Avatar of deep06
deep06Flag for United States of America

asked on

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.
Avatar of Gurvinder Pal Singh
Gurvinder Pal Singh
Flag of India image

Please share the existing code.

Avatar of deep06

ASKER

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>


ASKER CERTIFIED SOLUTION
Avatar of rdivilbiss
rdivilbiss
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of deep06

ASKER

rdivilbiss: thanks for your response. It was helpful but we found another solution to our problem.