[CC'd to (e-mail address removed)]
I have a script that changes a main/enlarged image when you click on a
thumbnail. It works fine in IE, but for some reason it won't doanything
in Netscape 7.1. Does anyone know if this is a problem withNetscape, or
is there something I can alter in this script that willallow it to work
in both IE and Netscape?
The problem is not with Netscape; your script is written for IE (and its
imitators).
<script language="JavaScript">
The type attribute is required. That line should read:
<script type="text/javascript">
The language attribute is deprecated: don't use it.
function enlarge() {
oSrcElem = event.srcElement;
Netscape and other, similar, browsers do not use a global event object.
The event object is passed as an argument to the event. The usual way
attend to both conventions is to use:
function enlarge(evt) {
var obj = null; // *Always* declare local variables with the var
// keyword. Omitting it will make the variable
// global (bad practice).
evt = evt || event; // If evt evaluates to false (null or undefined,
// in this case), assign a reference to the
// global event object.
We now come to the next problem: Microsoft do not follow the Document
Object Model (DOM) Events specification, and use different properties to
virtually everyone else. Browsers that follow Microsoft use
Event.srcElement, and everyone else uses Event.target.
if (evt) {
if (evt.target) {
obj = evt.target;
} else if (evt.srcElement) {
obj = evt.srcElement;
}
Now, finally, you can change the image source. However, to do that, we
must remove one final Microsoft-ism.
imgLarge.src = oSrcElem.src.replace(/thumbs/,'images');
IE allows you to refer to many different types of objects in many varying
ways, the worst of which is displayed above. imgLarge is presumably the id
or name of an IMG element, and refering to this name in IE will yield a
reference to the object: not so in other browsers!
If the event was fired by a separate element (not the image), the best way
to refer to the image is through the images collection, which is supported
as far back as Netscape 4:
if (obj) {
document.images['imgLarge'].src =
obj.src.replace(/thumbs/, 'images');
}
}
}
</script>
To complete the changes, you need to change the function call in order to
pass the event object[1]:
<img id="imgLarge" src="thumbs/image.jpg" ... onclick="enlarge(event)">
But, you do fire the event from the image. This allows a drastic reduction
to the code:
function enlarge(obj) {
obj.src = obj.src.replace(/thumbs/, 'images');
}
And the appropriate call change:
<img src="thumbs/image.jpg" ... onclick="enlarge(this)">
Inside an intrinsic event listener, 'this' refers to the object to which
the event is targeted. I also removed the id attribute as it's now
redundant (unless, of course, you use it elsewhere.
I imagine that you will have to remove the width and height attributes
from the IMG element, because they will not change when the image is
replaced: you'll end up with a full-sized image squashed into a small
rectangle.
Hope that helps,
Mike
[1] (For completeness) I know I said that the event attribute is passed to
the function, so why did I still include the identifier, event? When the
page is parsed, the value of the intrinsic event attributes (which, in
reality, is just text) is inserted into an anonymous function assigned to
the event listener:
document.images['imgLarge'].onclick = function(event) {
enlarge(event);
};
The function, as shown above, has a single argument, event, which holds
the event object in browsers such as Mozilla and Netscape. In the HTML a
few paragraphs above, it this argument that the identifier, event, is
referring to.
The same, overall effect could be achieved by placing the following code
in a SCRIPT element after the IMG:
document.images['imgLarge'].onclick = enlarge;
When called by the browser, the function, enlarge, will be passed a
reference to the event object, just like the anonymous function.
