I've searched through different sites and can't quite figure out where I've gone wrong. This works in the major browsers, but not in IE7 or IE8. My issue is that the source of the event is null once the image is loaded. You'll see that printed out on the page (I have a div where I'm sending some text). Here is my code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script type="text/javascript">
var panorama = new Object();
var mainContainer;
var panoHolder;
var panoCanvas;
//once document is loaded starts website
AttachEvent(window, 'load', eventWindowLoaded);
// logic to attach the event correctly in IE
function AttachEvent(element, type, handler) {
if (element.addEventListener) {
element.addEventListener(type, handler, false);
}else if (element.attachEvent) {
element.attachEvent('on' + type, handler)
} else {
element['on' + type] = handler;
}
}
function eventWindowLoaded() {
panorama.totalpanels = 6;
panorama.sourceLocation = "my_files/images/";
panorama.width = 3200;
panorama.height = 964;
panorama.thumbnails = new Object();
panorama.thumbnails.images = new Array(panorama.totalpanels);
panorama.thumbnails.imageWidths = new Array();
panorama.thumbnails.imageHeight = 0;
//sets attributes of container objects
mainContainer = document.createElement("div");
mainContainer.id = "container";
mainContainer.style.width = "1010px";
mainContainer.style.height = panorama.height + "px";
obj("mainelement").appendChild(mainContainer);
panoHolder = document.createElement("div");
panoHolder.id = "animationholder";
panoHolder.style.width = panorama.width + "px";
panoHolder.style.height = panorama.height + "px";
panoHolder.style.left = '0px';
panoHolder.style.top = "0px";
mainContainer.appendChild(panoHolder);
panoCanvas = document.createElement("div");
panoCanvas.id = "room";
panoCanvas.width = panorama.width;
panoCanvas.height = panorama.height;
panoHolder.appendChild(panoCanvas);
for(var i = 1; i <= panorama.totalpanels; i++) {
panorama.thumbnails.images[i - 1] = new Image();
AttachEvent(panorama.thumbnails.images[i - 1], 'load'preloadThumbnails);
panorama.thumbnails.images[i - 1].src = panorama.sourceLocation + "TC_tile_thumb" + i + ".jpg";
panorama.thumbnails.images[i - 1].id = i - 1;
}
}
function preloadThumbnails(e) {
panorama.thumbnails.loaded++;
//adds width and height attributes to panorama.thumbnails.imageWidths array
try {
panorama.thumbnails.imageWidths.push(e.currentTarget ? e.currentTarget.width : window.event.srcElement.width);
panorama.thumbnails.imageHeight = e.currentTarget.height;
panoCanvas.appendChild(e.currentTarget);
}
catch (ee) {
var targ;
if (!e) var e = window.event;
if (e.currentTarget) targ = e.currentTarget;
else if (e.srcElement) targ = e.srcElement;
t('<br /> error: ' + ee + '<br /> event: ' + e + '<br /> target: ' + targ + '<br />' + e[0], true);
}
if (panorama.thumbnails.loaded >= panorama.totalpanels) {
e.currentTarget.removeEventListener('load', preloadThumbnails , false);
startFullRezPreload();
}
}
//returns an object reference
function obj(element) {
return document.getElementById(element);
}
function t(message, addTo) {
if (addTo) {
obj("test").innerHTML += message;
}
else {
obj("test").innerHTML = message;
}
}
</script>
</head>
<body id="mainelement">
<div id="test">Test</div>
</body>
</html>
Internet Explorer (old versions) didn't pass an event object as a parameter. It's stored instead in a global (window) property called "event".
The traditional approach was to do something like this at the top of the event handler: