Advanced Image Considerations | HTML & XHTML: The Complete Reference (Osborne Complete Reference Series)

< Day Day Up >

Although most of the basic uses of images have been discussed, there are some issues that should be mentioned for later discussion. First, because an image can be referenced by a style sheet or by a scripting environment, it might be very important to provide a name or identifier for it. The class , id , and name attributes can be used to provide names for images so they can be referenced and manipulated by scripting or style information that usually is found in the head of the document. Names should be unique and in the proper HTML form.

It is possible to include inline scripting or style information directly with an image. For example, setting the style attribute allows an inline style to bind to a particular < img> tag. Style sheets are discussed in Chapters 10 and 11. Furthermore, it is possible to have images bound to a particular event using an event attribute such as onmouseover and tying it to a script. A very simple use of tying an event with an image is to have the image change state depending on the user 's action. The most basic use would be to create animated buttons or buttons that make a sound when clicked, but the possibilities are endless. A more detailed discussion and examples of how to bind JavaScript to create animated buttons are presented in Chapter 14.

An important comment concerning the future of img is that starting with HTML 4, it is supposed to be possible to include images using an < object> tag. For example,

  <object data="images/logo.gif">  Picture of the Demo Company  building  </object>

Similar to the <img> tag, the data attribute is set to the URL of the included image while the alternative rendering is placed within the object element. Although this new syntax might create some interesting possibilities, the reality is that browsers currently don't support this form of image inclusion. Whereas this generic <object> tag for image support makes sense given that an image is no different from any other included binary object, the fact is that until browser vendors embrace this, it should be avoided. A more complete discussion of this element can be found in Appendix A, which provides the full syntax of the object element.

Image Toolbar

A special browser-specific feature for images that necessitates some special comment is Internet Explorer 6's image toolbar. If you have ever held your mouse over a large image in a Web page using IE6, you may have noticed a strange pop-up toolbar.

The toolbar supports quick saving of images to a special "My Images" folder. The browser determines what images to show this toolbar for by looking at the dimension of the image. Typically, the image must be fairly large to receive an image tool bar, and using just this simple idea, the browser does a pretty good job of not showing this feature of navigation buttons and banner ads. But for everything else, it depends on if you pass its size threshold. To turn off the image toolbar on an individual image, just add the galleryimg attribute and set its value to no , like so:

  <img src="democompanylogo.gif" alt="Demo Company" galleryimg="no"   height="50" width="100" />

If you just want to be rid of the whole feature altogether in a page, either have your server issue an HTTP response header of Imagetoolbar: no or, more easily, use a <meta> tag in the <head> of each page.

  <meta http-equiv="imagetoolbar" content="no" />

< Day Day Up >