[thelist] WinXP/JavaScript prob

[.jeff]

steve,

><><><><><><><><><><><><><><><><><><><><><><><><><><><><><
> From: Steve Purkiss
>
> I've now implemented the code that Jeff pointed me to on
> his site - thanks Jeff - [...]
><><><><><><><><><><><><><><><><><><><><><><><><><><><><><

you're welcome.

><><><><><><><><><><><><><><><><><><><><><><><><><><><><><
> although haven't managed to get my head round a page
> where there's multiple instances of the same button,
> therefore the same name for the image, therefore it
> doesn't work...
><><><><><><><><><><><><><><><><><><><><><><><><><><><><><

this is actually a common enough situation that i think it'd be worth my
writing a version that would handle this.  i don't really have time to put
something together on my site, but here's how i'd handle it.

use the preload as it is.  we don't want to unnecessarily preload duplicate
images.  however, we'll make some slight modifications to the rollOver()
script and how it's called.  it's really as simple as passing an additional
argument to the function that can be used to uniquely identify the <img>
instances while still using similar preloaded instances they're connected
to.

with that, here's the altered function:

function rollOver(iName, iIndex, iState)
{
  if(document.images && loaded)
    document.images[iName + '_' + iIndex] = self[iName + '_' + iState].src;
}

now, alter the way you call this function.  this is how i'd set it up for
the top instance.  notice the new 2nd argument.  combine the preloaded
object name, "about", with the value of the 2nd argument, "0", separated by
an underscore and you've got the value you should use for the name attribute
of the <img> tag.

<a
  href="about.html"
  onMouseover="rollOver('about', 0, 'on')"
  onMouseout="rollOver('about', 0, 'off')"
><img
  name="about_0"
  src="images/about_off.gif"
  height="25"
  width="75"
  border="0"
  alt="About"
></a>

to use the same object instance again for a rollover, simply change the
value of the 2nd argument and the value of the name attribute of the <img>
object.

<a
  href="about.html"
  onMouseover="rollOver('about', 1, 'on')"
  onMouseout="rollOver('about', 1, 'off')"
><img
  name="about_1"
  src="images/about_off.gif"
  height="25"
  width="75"
  border="0"
  alt="About"
></a>

you don't have to use numbers either.  you could just as easily use "top"
and "bottom".

top:

<a
  href="about.html"
  onMouseover="rollOver('about', 'top', 'on')"
  onMouseout="rollOver('about', 'top', 'off')"
><img
  name="about_top"
  src="images/about_off.gif"
  height="25"
  width="75"
  border="0"
  alt="About"
></a>

bottom:

<a
  href="about.html"
  onMouseover="rollOver('about', 'bottom', 'on')"
  onMouseout="rollOver('about', 'bottom', 'off')"
><img
  name="about_bottom"
  src="images/about_off.gif"
  height="25"
  width="75"
  border="0"
  alt="About"
></a>


good luck,

.jeff

http://evolt.org/
jeff at members.evolt.org
http://members.evolt.org/jeff/