Script won't work in Netscape?

[Wm]

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 do anything in
Netscape 7.1. Does anyone know if this is a problem with Netscape, or is
there something I can alter in this script that will allow it to work in
both IE and Netscape?
<script language="JavaS cript">
function enlarge() {
oSrcElem = event.srcElemen t;
imgLarge.src = oSrcElem.src.re place(/thumbs/,'images');
}</script>
Example line: <img src="thumbs/JosielynI26.jpg " width="33" height="50"
border="1" onClick="enlarg e()">Thanks for any/all assistance, and any
replies CC'd to my LAshooter HoTMaiL acct would be greatly appreciated!

Wm

[Martin Honnen]

Re: Script won't work in Netscape?



Wm wrote:
[color=blue]
> 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 do anything in
> Netscape 7.1. Does anyone know if this is a problem with Netscape, or is
> there something I can alter in this script that will allow it to work in
> both IE and Netscape?
> <script language="JavaS cript">
> function enlarge() {
> oSrcElem = event.srcElemen t;
> imgLarge.src = oSrcElem.src.re place(/thumbs/,'images');
> }</script>
> Example line: <img src="thumbs/JosielynI26.jpg " width="33" height="50"
> border="1" onClick="enlarg e()">[/color]

You want
<script type="text/javascript">
function enlarge (img) {
document.images .imgLarge.src =
img.src.replace (/thumbs/,'images');
}
</script>
with
<img name="imgLarge" ...>
and
<img src="thumbs/JosielynI26.jpg " onclick="enlarg e(this);" ...>

--

Martin Honnen
http://JavaScript.FAQTs.com/

[Michael Winter]

Re: Script won't work in Netscape?

[CC'd to LAshooter@hotma il.com]

On Mon, 26 Jul 2004 03:27:27 GMT, Wm <luvs2shoot@com cast.net> wrote:
[color=blue]
> 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?[/color]

The problem is not with Netscape; your script is written for IE (and its
imitators).
[color=blue]
> <script language="JavaS cript">[/color]

The type attribute is required. That line should read:

<script type="text/javascript">

The language attribute is deprecated: don't use it.
[color=blue]
> function enlarge() {
> oSrcElem = event.srcElemen t;[/color]

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.srcElemen t, 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.
[color=blue]
> imgLarge.src = oSrcElem.src.re place(/thumbs/,'images');[/color]

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="enlarg e(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="enlarg e(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.

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail

[Erwin Moller]

Re: Script won't work in Netscape?

Hi WM,

I think you should buy Michael a couple of beers now. ;-)

Regards,
Erwin Moller

[Satan's Little Sister]

Re: Script won't work in Netscape?

On Mon, 26 Jul 2004 16:11:42 +0200, Erwin Moller wrote:
[color=blue]
>I think you should buy Michael a couple of beers now. ;-)[/color]

Wow, I feel like I own 'im a couple, too.

Things that hadn't worked for me and the ugly hacks I'd resorted to,
all make more sense now.

Thanks!
--
sls