JavaScript IE Compatibility Issue

[mr.mattyg]

I might as well start off like everyone else who posts problems they
are having....So I'm new to JavaScript.....

Anywho, I have a page that lists 15 or so thumbnails and then one big
image of one of those thumbnails. I wrote some javascript code that
when you click on the thumbnail the real picture of that thumbnail
loads in the big image on the page. So essentially I wrote some very
simple code that replaces the "src" of an image tag on an onClick
event. I also replace some text within some elements that are tagged
with an ID. Everything works great in all browsers except in internet
explorer 6.0 (and possibly other versions of IE, just 6.0 is all I'm
using). If anyone has run into this problem before, or notices
something wrong with the code, any insight would be GREAT. Thanks
All,


/*******************JAVA SCRIPT FUNCTION***********************/

<script type="text/javascript">
function click(name, title, susser, photographer, location)
{
fool = "http://www.gnarwire.com/photos/guest/" + name;
document.photo.src = fool;
document.getElementById('picTitle').innerHTML= title + " in " +
location;
document.getElementById('picSusser').innerHTML= susser;
document.getElementById('picPhotographer').innerHTML= photographer;

}
</script>

/****************THUMBNAIL SECTION*********************/

<a class="thumbnail">
<img src="photos/guest/th256347_2Aguille du Midi 034.jpg"
onclick="click('256347_2Aguille du Midi 034.jpg', 'Crevasse Rescue
Training', 'Topher Plimpton', 'Mike Schirf', 'Mer de Glace');"
border="0" width="70px" height="70px">
</a>
<a class="thumbnail">
<img src="photos/guest/th256346_poubell 003.jpg"
onclick="click('256346_poubell 003.jpg', 'Harny Suss\'n Le Poubelle',
'Johannes Schmid', 'Mike Schirf', 'Chamonix');" border="0"
width="70px" height="70px">
</a>
<a class="thumbnail">
<img src="photos/guest/th256345_MattToph.jpg"
onclick="click('256345_MattToph.jpg', 'Mt. Blanc', 'Topher and Matt',
'Mike Schirf', 'Mt. Buet -- Chamonix');" border="0" width="70px"
height="70px">
</a>

/*********************BIG IMAGE SECTION********************/
<div class="post" id="post-1">
<H2 id="picTitle">
Crevasse Rescue Training in Mer de Glace
</H2>
<div class="entry">
<img src="photos/guest/256347_2Aguille du Midi 034.jpg" name="photo">
</div>
<div class="postmetadata">
<h3 align="center">
<span> Susser: </span>
<span id="picSusser">Topher Plimpton</span>
&nbsp &nbsp
<span> Photographer:<span>
<span id="picPhotographer">Mike Schirf</span> </h3>
</div>
</div>

 

[Lee]

(e-mail address removed) said:

Everything works great in all browsers except in internet
explorer 6.0 (and possibly other versions of IE, just 6.0 is all I'm
using).
/*******************JAVA SCRIPT FUNCTION***********************/

<script type="text/javascript">
function click(name, title, susser, photographer, location)

Change the name of your function. IE assigns a method named
"click" and silently ignores the one you create. You'll find
that some people think IE is lousy software.


--

 

[Richard Cornford]

... . Everything works great in all browsers except in internet
explorer 6.0 ...

<script type="text/javascript">
function click(name, title, susser, photographer, location)

<img src="photos/guest/th256347_2Aguille du Midi 034.jpg"
onclick="click('256347_2Aguille du Midi 034.jpg', 'Crevasse Rescue

<snip>

You are suffering from a feature of web browsers that varies
considerably coinciding with a second variable feature and provoked by
your employing simplistic function names.

When a browser uses the text of an intrinsic event attribute (such as
onclick) in the HTML to create an event handling function it may or may
not create that function with an augmented scope chain, and browsers
that do this differ in the scope chains they create for such functions.
Internet Explorer does create its event handling functions with
augmented scope chains, and it puts the element that had the attribute
in its HTML at the top of that scope chain.

The second variable feature is that IE (and some, but not that many,
other browsers) implements a - click - method on its IMG elements.

When the event handling function created from your - onclick - attribute
is executed it executes - click( ... ); - and to do that it must resolve
the Identifier - click - against the scope chain. The Identifier will
resolve as a Reference to the value of the 'click' property of the first
object on the scope chain that has such a property. Without any scope
chain augmentation the Identifier resolution process would work down the
scope chain until it found the global object at the end of the chain.
Your globally defined - click - function is a property of the global
object named 'click' and so the Identifier would normally resolve as a
reference to that function.

However, with the augmentation, and with the IMG element now at the top
of the scope chain, when - click - is resolved the first object found on
the scope chain that has a 'click' property is the IMG element. The -
click - Identifier then resolves as a reference to the - click - method
of the IMG element and it is that method that is called. No error will
follow as you have just clicked the IMG element to trigger the event so
the effect of firing the IMG element's - click - method is unnoticeable.

There are lots of ways to deal with this issue, but I tend to think that
functions should be given names that state what they do. Now if your
function had a name that stated what it did that name would not be
'click'' and would be unlikely to coincide with any method on the any
object on any augmented scope chain (and if its name did correspond then
that would suggest that you already have a method that will do what your
function is attempting. That is, a function name like
'setImgFromThumbnail', while maybe a little cumbersome, is very unlikely
to clash with anything else.

Richard.