?
Solved

onMouseout vs. onClick

Posted on 2003-03-08
6
Medium Priority
?
568 Views
Last Modified: 2008-03-17
<% If CurPageType = "home" then %><a href="default.asp"><img src="images/fun/home1.gif" border=0><% else %>
<a href="default.asp" onMouseOver="document.tab1.src='images/fun/home1.gif';" onMouseOut="document.tab1.src='images/fun/home.gif';" onClick="document.tab1.src='images/fun/home1.gif';"> <img src="images/fun/home.gif" name="tab1" border="0"></a><%end if%></td>

I've got basic navigation tabs using this method...all works great, except when I click on the link, the image is changed using the onmouseover, and when I mouse out, it goes back, can I make the onclick override the onmouseout or do I need to use an if/then?

does this make sense? I keep trying to do this stuff late at night...not helping my sanity checks.

Check the example at http://www.aero-owners.com

I'd like it so that when a tab is clicked...the onmouseover image will stay til the page is loaded, but if not clicked to go back to the initial image.

Aero-Owner

"Life is too short to be taken seriously"

0
Comment
Question by:aero-owner
[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
  • 4
  • 2
6 Comments
 
LVL 5

Expert Comment

by:cirtap
ID: 8095411
Hi aero,

it's best using a function to handle the rollovers instead on hardcoding it into the img element.

<script language="JavaScript">
// set pagetype (use ASP to write this variable)
var thisArea="home";

function swapImage(ImgName, what) {
  if (!document.images[ImgName]) return;

  eImg = document.images[ImgName];
  switch case (what) {
  case 1: // mouseover
    picSrc = eImg.name + "_over.gif";
    break;
  case 2: // click
    picSrc = eImg.name + "_active.gif";
    break;
  default: // mouseout
    picSrc = eImg.name + ".gif";
    break;
  }
  eImg.src = picSrc;
}
function setAreaImage() {
// used to set image when page is loaded
  if (document.images[thisArea]) {
     swapImage(document.images[thisArea], 2); // simulate "onclick"
  }
}
onload=setAreaImage;
</script>

<a href="home.html"
  onMouseOut="swapImage('home')"
  onMouseOver="swapImage('home', 1)"
  onClick="swapImage('home', 2)"><img name="home" src="images/home.gif"></a>

<a href="home.html"
  onMouseOut="swapImage('tools')"
  onMouseOver="swapImage('tools', 1)"
  onClick="swapImage('tools', 2)"><img name="tools" src="images/tools.gif"</a>

Ther's no preloading or other fancy stuff here and it moves the code from settings the "clicked" image to the client as well, but you can stoll use the if-then-else you have, just change the HTML.

This method requires your IMG elements and files share a common name as shown above (home image=home.gif, tools image=tools.gif, fun image=fun.gif) and their over/active suffixed accordingly: home_over.gif, home_active.gif

CirTap
0
 
LVL 5

Expert Comment

by:cirtap
ID: 8095626
oops: error - forget this code, it isn't working.
will come back with a fixed version
0
 
LVL 5

Expert Comment

by:cirtap
ID: 8095884
ok. found the working one.
let me know, if you want to see it.
seems like you don't keep track of your open questions
http://www.experts-exchange.com/Web/Web_Languages/ASP/Q_20515703.html

CirTap
0
Get real performance insights from real users

Key features:
- Total Pages Views and Load times
- Top Pages Viewed and Load Times
- Real Time Site Page Build Performance
- Users’ Browser and Platform Performance
- Geographic User Breakdown
- And more

 
LVL 1

Author Comment

by:aero-owner
ID: 8096696
sorry...that was my first post...didnt' know I needed to accept answers or how it works...now I'm good...but yes, I would like to see how it works.
0
 
LVL 5

Accepted Solution

by:
cirtap earned 200 total points
ID: 8099279
Ok, here we go.
The thing about using a base-name for the <img name> and the image-files for each of the various status applies as well.

You'll need three different images if you want the mouseover- and click-image to look different. To ease the pain, you can set their suffix in s1 - s3, or make "clicked" the same as "mouseover".

I used the thisSection variable for what you have called PageType in ASP. Actually the same thing.
There are a couple of 'if's to compare thisSection with the images being hovered or clicked.

Unless you're using frames to load a the target file, I don't know if changing to a clicked-stated and then instantly loading a page in the same window will make much sense as the user might no see it.
The script should be x-browser, as it comes from the NS4 area ;-). I removed the ancient document.images check (anyone using MSIE 3.0?).

The image path is alwas relative to the HTML page and this one assumes your images are in the same directory. To do a quick test, put it in the same directory as your images, change the name attribute accordingly and have the files available for each status.

Btw: you can move ALL eventhandlers to the <IMG> itself as modern browsers can handle it. This will automatically bypass NS4. You may then change each
  swapImage('name if image' ... )
to
  swapImage(this.name ...)
and avoid cut'n'paste errors.

Have fun
CirTap


<html>
<head>
<script language="JavaScript">
// name of image to be highlited when page is loaded
thisSection="home";
lastSection=null;
// suffixes used for image status
s1 = ".gif"; /* normal, mouseout*/
s2 = "_ov.gif"; /* mouseover */
s3 = "_ac.gif"; /* click, preselected */

function swapImage(ovrImg, n) {
/*
  ovrImg = image.name (== pagetype)
  n=mouseaction: 1=over, 2=out, 3=click
*/
var grpStat, newImg, sectImg;
  /* hilite image of current page section */
  if (thisSection) {
    if (thisSection != "") {
      sectImg=thisSection;
      grpStat=(n==1) ? s2 : s3;
    } else {
      sectImg=ovrImg;
      grpStat=s1;
    }
  } else {
    sectImg=ovrImg;
    grpStat=s1;
  }
  newImg = ovrImg;

  /* onMouseOut */
  if (n==0) {
    document[sectImg].src= sectImg+grpStat;
    document[ovrImg].src = (sectImg!=ovrImg) ? newImg+s1 : newImg+grpStat;
  }
  /* onMouseOver */
  if (n==1) {
    if (sectImg==ovrImg) document[sectImg].src= sectImg+grpStat;
    document[ovrImg].src = (sectImg!=ovrImg) ? newImg+s2 : newImg+grpStat;
  }
  /* onClick */
  if (n==2) {
    if (sectImg==ovrImg) {
      document[sectImg].src= sectImg+grpStat;
    } else {
      document[sectImg].src= sectImg+s1;
    }
    document[ovrImg].src = (sectImg!=ovrImg) ? newImg+s3 : newImg+grpStat;
    thisSection = ovrImg;
  }
}
</script>
</head>
<body onload="swapImage(thisSection,2)">
<a href="javascript:// put URL here"
 onMouseOut="swapImage('home',0)"
 onMouseOver="swapImage('home', 1)"
 onClick="swapImage('home', 2)"><img name="home" src="home.gif" border="0"></a>

<a href="javascript:// put URL here"
 onMouseOut="swapImage('kontakt',0)"
 onMouseOver="swapImage('kontakt', 1)"
 onClick="swapImage('kontakt', 2)"><img name="kontakt" src="kontakt.gif" border="0"></a>

<a href="javascript:// put URL here"
 onMouseOut="swapImage('programm',0)"
 onMouseOver="swapImage('programm', 1)"
 onClick="swapImage('programm', 2)"><img name="programm" src="programm.gif" border="0"></a>
<hr>
</body>
</html>
0
 
LVL 1

Author Comment

by:aero-owner
ID: 8101584
sweet...thank you so much for the help.
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

765 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