Monday, July 04, 2005
Properties IV: The Image Object
Blog Entry #15
(1) HTML Goodies' general comments on images and image formats
(2) DevGuru's <img> tag page
document.images.relevant_property = "suitable_value";
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
Presumably the Image lowsrc property should be writable as well; Joe has a tutorial on lowsrc images here.
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';">
<input type="button" value="Click here to increase the image hspace." onclick="document.images.hspace='40'; document.images.border='1';">
(The <img> border is initially set to "0".)
With Netscape, it's not necessary to reset the border; the document.images.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.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.
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.style.border='dotted indigo 10px';">
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:
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.
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.