Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

onMouseClick (onMouseOver, OnMouseOut and swapImgRestore)

Posted on 2010-01-12
4
Medium Priority
?
2,025 Views
Last Modified: 2012-05-08
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
Comment
Question by:deep06
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
4 Comments
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 26292965
Please share the existing code.

0
 

Author Comment

by:deep06
ID: 26293107
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
 
LVL 29

Accepted Solution

by:
rdivilbiss earned 1000 total points
ID: 26301281
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
 

Author Comment

by:deep06
ID: 26350124
rdivilbiss: thanks for your response. It was helpful but we found another solution to our problem.
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When the s#!t hits the fan, you don’t have time to look up who’s on call, draft emails, call collaborators, or send text messages. An instant chat window is definitely the way to go, especially one like HipChat. HipChat is a true business app. An…
Ready to get certified? Check out some courses that help you prepare for third-party exams.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.

721 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question