Re: Image Swap on Mouseover

"McKirahan" <News (AT) McKirahan (DOT) com> wrote

<snip>

br><img src="A.gif" name="AB" border="0" width="10"
height="10" alt=""
br><a href="#" onMouseOver='AB.src="B.gif"'><img src="C.gif"
border="0" width="10" height="10" alt=""></a
br><a href="#" onMouseOver='AB.src="B.gif"'>LINK</a
snip

Because you are using the name of the image element that is to have its
SRC swapped as an *unqualified* identifier this code is relying on one
of two non-standard mechanisms. Either it is assuming that named element
references will be made available as global variables with corresponding
names, or it is relying of the internally generated event handling
functions being provided with special scope handling mechanisms so they
can resolve the identifier as a named property at some other point in
the DOM (probably as named properties of the document object).

And many browsers provide one, or both, of these mechanisms (though the
special scope resolution for event handling functions is implemented
very differently between browses). However, there are browses that would
otherwise happily handle the image swapping but do not support the
identifier resolution required by you code (You would get the equivalent
of "AB is null or not an object" error reports (assuming the browser
reports script errors)).

The widest support for referencing a named image element would be as a
named property of the (W3C HTML DOM specified) - document.images -
collection:-

onmouseover="document.images['AB'].src = 'B.gif';"

- but some really ancient browsers (along with some incomplete XHTML
implementations) do not provide an images collection. For those older
browsers there is just no way of accessing the image elements so the
image swapping could not happen anyway, but there is no reason to
generate JavaScript error reports in the absence of the required
collections. That would be easiest achieved by passing the image
swapping task to a function that checked for the existence of the -
document.images - collection prior to attempting to use it.:

<script type="text/javascript">
function swapABimage(url){
var img;
if((document.images)&&(img = document.images.AB)){
img.src = url;
}
}
</script>
....
onmouseover="swapABimage('B.gif');"

Should function on all HTML browsers that are capable of swapping images
and not error (or do anything) on browsers that cannot. The function
design could be modified to be more general, perhaps passing the name of
the image as a parameter along with the URL (and using bracket notation
instead of dot notation to reference the named images collection
property).

Richard.