I am having a problem with style properties for dynamic images in Mac OS X
Safari. By dymanic images, I mean images allocated with the javascript 'new
Image()' call.
With static images (created with the html <img> tag), I can make the image
visible or not, i.e. '<img style="visibility='hidden'" src='xxxx'/>'. But if
I create the image dynamically with javascript: new Image() then try to
modify the style, Safari chokes, and the Debug Javascript Console indicates
'Undefined value' at that point.
The following is a short test I put together to demonstrate the problem:
<html>
<head>
<title>test</title>
<script type="text/javascript">
function swap(){
if (this.id == 'image1') {
this.style.visibility = 'hidden';
var img2 = document.getElementById('image2');
img2.style.visibility = 'visible';
}
if (this.id == 'image2') {
this.style.visibility = 'hidden';
var img1 = document.getElementById('image1');
img1.style.visibility = 'visible';
}
}
function makeImgs(){
var container1 = document.getElementById('cont1');
var container2 = document.getElementById('cont2');
var img1 = new Image(150,130);
var img2 = new Image(150,130);
img1.id = 'image1';
img1.alt = 'image1';
img1.src = 'image1.gif';
img1.onclick = swap;
img1.style.visibility = 'visible';
img2.id = 'image2';
img2.alt = 'image2';
img2.src = 'image2.gif';
img2.onclick = swap;
img1.style.visibility = 'hidden';
container1.appendChild(img1);
container2.appendChild(img2);
}
</script>
</head>
<body onload="makeImgs()">
<div id="cont1" style="position: absolute; top: 100px; left: 100px;">
</div>
<div id="cont2" style="position: absolute; top: 100px; left: 300px;">
</div>
</body>
</html>
Of course you need to provide pictures for image1.gif and image2.gif in the
same folder as this file. It has been tested to work in Firefox, Internet
Explorer, and Opera, but it fails in Safari. After loading this in Safari,
you will find in the Debug Javascript Console an Undefined Value error
occurs at the statement "img1.style.visibility = 'visible'" in "function
makeImgs()" The problem doesn't seem to be with just .style.visibilty. I
also tested with .style.border and Safari failed with that.
Has anyone dealt with this Safari issue before and hopefully found a
solution?
Thanks in advance,
Joe
