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

onMouseout vs. onClick

<% 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
aero-owner
Asked:
aero-owner
  • 4
  • 2
1 Solution
 
cirtapCommented:
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
 
cirtapCommented:
oops: error - forget this code, it isn't working.
will come back with a fixed version
0
 
cirtapCommented:
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
Independent Software Vendors: 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!

 
aero-ownerAuthor Commented:
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
 
cirtapCommented:
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
 
aero-ownerAuthor Commented:
sweet...thank you so much for the help.
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

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