Javascript Style Properties for Dynamic Images in Safari

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

Joe Cox - 31 Mar 2006 12:36 GMT

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

Reply to this Message

RobG - 31 Mar 2006 14:03 GMT

> 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.

new Image() is not W3C DOM compliant, though I guess it's DOM 0. It seems
Safari creates an image object, but errors when you try to do anything with
it. Use W3C document.createElement() instead.

[...]

> function makeImgs(){
> var container1 = document.getElementById('cont1');
> var container2 = document.getElementById('cont2');
> var img1 = new Image(150,130);

Replace with:

var img1 = document.createElement('img');
img1.style.height = '150px';
img1.style.width = '130px';

> var img2 = new Image(150,130);

Replace as above with createElement().

[...]

Signature

Rob

Reply to this Message

Joe - 31 Mar 2006 15:00 GMT

Thanks. Actually, in the first version of my application I did use
document.createElement('img') statements. But, I read somewhere that if I
had many images I planned to swap out dynamically I could improve
performance by pre-caching from the server to the client with new Image()
calls. I guess this is not an option if I intend to support Safari browsers.

Trying to maintain cross browser compatibility is an extreme pain.

Thanks again.
Joe

>> 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
[quoted text clipped - 22 lines]
>
> [...]

Reply to this Message

RobG - 31 Mar 2006 17:49 GMT

> Thanks. Actually, in the first version of my application I did use
> document.createElement('img') statements. But, I read somewhere that if I
> had many images I planned to swap out dynamically I could improve
> performance by pre-caching from the server to the client with new Image()
> calls. I guess this is not an option if I intend to support Safari browsers.

If you are doing this for caching, then there is no difference between new
Image and createElement('img') - both create a DOM image object and
assigning a src attribute will load the image.

> Trying to maintain cross browser compatibility is an extreme pain.

new Image is not a W3C method, so if you just use createElement you are
standards compliant and cross-browser. You might consider testing for
createElement and use new Image as a fall-back, but only if support for
version 4 browsers matters.

The W3C DOM HTML spec has a HTMLImageElement interface, but it only has
properties, not methods.

<URL:http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-17701901>

[...]

Signature

Rob

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / JavaScript / March 2006

Javascript Style Properties for Dynamic Images in Safari