Monday, July 04, 2005
Properties IV: The Image Object
Blog Entry #15
References
(1) HTML Goodies' general comments on images and image formats
(2) DevGuru's <img> tag page
(3) JavaScript Image object pages:
(a) DevGuru
(b) JavaScript Kit
(c) IRT
Needless to say, the display and manipulation of images are a central part of the Web. In the context of JavaScript, the images on a Web page constitute a document object collection, to use IRT's categorization, and in turn, each image is an object with its own properties. In analogy to a link, an image can be accessed by a document.images[i] reference, e.g.:
document.images[0].relevant_property = "suitable_value";
We'll see in HTML Goodies' JavaScript Primers #8 that an image can also be referenced, somewhat more user-friendlily, by its name:
document.image_name.relevant_property = "suitable_value";
in which image_name is the value of the name attribute held by the image's HTML <img> tag.
In this post, I will briefly address some of the changeable features of images, including:
• identity of an image (name and source)
• dimensions of an image (width and height)
• positioning of an image (hspace, vspace, etc.)
• the image border
Seven of the nine Image object properties listed at DevGuru's Image object page are specified as "read-only" (JavaScript Kit and IRT are less clear in this regard). But are they really? Ever the optimist, I set out to see if I could write these "read-only" properties; I am pleased to report that in most cases I was successful.
Image Identity
The Image name property, which specifies the name attribute of an image's <img> tag, can be written, even on the fly, if for some reason you wanted to do that. Much more interesting is the also-writable Image src property, specifying the <img> src attribute whose value is the 'source' or URL of the image. Bearing in mind that an <img> element represents not so much an image as it does a placeholder for an image, we can use the same space on a Web page for different images by changing the value of the src property, a process informally termed "image flip". Several of the later HTML Goodies JavaScript primers feature image-flip scripts, including Primers #27 and #28, which present scripts for a JavaScript slide show and for a JavaScript animation, respectively, so we'll hold off an image-flip demo until then.
Presumably the Image lowsrc property should be writable as well; Joe has a tutorial on lowsrc images here.
Image Dimensions
I find that the Image width and height properties can be written dynamically when using either MSIE or Netscape. I have put together a demo that demonstrates the writing of these and other Image properties. The code for the button that changes the width and height of the thumbnail photo is:
<input type="button" value="Click here to change the image width and height." onclick="document.images['catImg'].width='430'; document.images['catImg'].height='330';">
The Image Properties Demo
Below is a thumbnail photograph of Alli, the sleeping kitty.
Meow!
Below is a thumbnail photograph of Alli, the sleeping kitty.
Meow!Image Position
As noted by DevGuru, an hspace attribute in an <img> tag can be used to add horizontal blank space between an image and whatever is to the left and the right of it; similarly, a vspace attribute can be used to add vertical blank space between an image and whatever is above and below it; these attributes are somewhat analogous to the cellpadding attribute of a <table> element. The corresponding JavaScript hspace and vspace properties can both be written, although the implementation thereof on my computer is browser-dependent. When using MSIE - this may sound strange and I'm at a loss to explain it - I have found (admittedly by accident) that I can write the hspace and vspace properties IF I also change the value of the Image border property. For example, the code for the button that sets dynamically the hspace property of the thumbnail photo in the above demo is:
<input type="button" value="Click here to increase the image hspace." onclick="document.images[0].hspace='40'; document.images[0].border='1';">
(The <img> border is initially set to "0".)
With Netscape, it's not necessary to reset the border; the document.images[0].hspace='40' command by itself will increase the hspace.
But maybe you want to add more space to just the left side of an image and not the right side, or to just the top and not the bottom (or vice versa). Well, the style object and its properties - specifically, the margin-left, margin-right, margin-top, and margin-bottom properties - to the rescue! The demo code for the button that increases only the left margin of the thumbnail photo is thus:
<input type="button" value="Let's set a larger left margin." onclick="document.images[0].style.marginLeft='80px';">
Joe discusses and demonstrates an alternate approach to the positioning of images with style commands in his "So, You Want Positioning, Huh?" tutorial. To set the pixel coordinates (relative to the origin of the document content area) of the upper-left-hand corner of an image, he uses the following code:
<img style="position:absolute;top:35px;left:170px;" src="circle.gif">
Joe concedes: "position:absolute; states that the image will go exactly where I say it will. If text or another picture is already there -- tough. This will go right over top of it. That is one of the drawbacks to this positioning stuff." This overlay problem won't happen, however, if you use margin-left and margin-top instead of the position, left, and top properties.
BTW, the x and y Image properties listed on IRT's Image object page return respectively the left and top pixel coordinates of an image, regardless of how (or whether) the image was positioned. The x and y properties are supported by Netscape but not by MSIE, and are read-only.
Image Border
As is clear from our discussion of the hspace/vspace properties above, the Image border property is writable. Relatedly, Joe outlines the creation of variously styled borders in his "CSS and Borders" tutorial. The demo code for the button that puts a fancy border around the thumbnail photo is thus:
<input type="button" value="Let's put a fancy border around the photo." onclick="document.images[0].style.border='dotted indigo 10px';">
Image Loading/Visibility
I even took a stab at writing the Image complete property, which returns true if an image has completely loaded and false if it hasn't. I put:
onload="document.images[0].complete=false;"
in the document <body> tag to see if I could prevent the Alli photo from loading - no luck/error. (MSIE: "Object doesn't support this property or method"; Netscape: "Setting a property that has only a getter".)
However, it is possible to hide a loaded image and then have it appear in response to a user event by initially setting the image's style.visibility property to "hidden" and then changing it to "visible", as demonstrated below.
Image Visibility
This demo is for the dog lovers out there. Woof!
Roll your mouse over these words to visualize a photo of Cali, the German shepherd.
This demo is for the dog lovers out there. Woof!
Roll your mouse over these words to visualize a photo of Cali, the German shepherd.
It was my original intention to also discuss the properties of form elements in this post, but then I thought, "Y'know, Image properties really deserve their own entry," so we'll get to forms next.
reptile7
- posted by A. Peak @ 6:35 PM
Actually, reptile7's JavaScript blog is powered by Café La Llave. ;-)