[thelist] Wanted: the definitive fool-proof mouseover JavaScript

Paola Kathuria paola at limitless.co.uk
Tue Jun 26 19:46:27 CDT 2001


I'm looking for short, maintaintable, and bug-free mouseover JS.

I happened to see the site I was working on in Konqueror and
noticed that the mouseovers weren't working.  I then realised
that I'd been using the same JS mouseover code since 1997
and that's it time to update it!

I currently use something that tests for certain browsers
and versions, hence it not working with Konqueror:

<SCRIPT LANGUAGE="JavaScript">
<!--
browserName = navigator.appName;
  browserVer = parseInt(navigator.appVersion);
  if (browserName == "Netscape" && browserVer >= 3 ||
      browserName == "Microsoft Internet Explorer" && browserVer >= 4)

  [define images and functions]

I'd prefer a solution that doesn't refer to browser
makes/versions at all but which also won't produce any JS
error messages on any browser (no matter how old).

I have had a rummage around on Google and have found two
common approaches: testing for browser make/version and the
if(document.images) version (also seen with no JS version).
The latter one is elegant but, sadly, produces a JS error
in IE 3.  True, there can't be many people using IE 3 but
I'd still prefer a script that didn't produce any error
messages at all.

My partner and I came up with this version:

<SCRIPT LANGUAGE="JavaScript">
<!--
  function img_inact(imgName) {}
  function img_act(imgName) {}
// -->
</SCRIPT>

<SCRIPT LANGUAGE="JavaScript1.1">
<!--
  homeon = new Image(100,24);
  home.src = "/images/b-home1.gif";
  [...]

  function img_inact(imgName)
  {
    imgOff = eval(imgName + "off.src");
    document [imgName].src = imgOff;
  }

  function img_act(imgName)
  {
    imgOn = eval(imgName + "on.src");
    document [imgName].src = imgOn;
  }
// -->
</SCRIPT>

The first SCRIPT is there for pre 1.1 JS browsers which
will see the function call in the HREFs (otherwise you
get an error message).  The second script will then
overwrite the function definitions for JS 1.1+ browsers.

I like this as the code is cleaner without the conditionals.
However, is it legal to define the same function in
consecutive JS scripts?  (And are the braces needed in the
empty function calls?)

If not, the alternative is to have the first script be
JavaScript1.1 and have it set a variable.  The second
script (which doesn't need a JS version) then just has
to test whether tha variable has been set before the image
and function definitions.

Any ideas?


Paola




More information about the thelist mailing list