Platinum Edition Using HTML 4, XML, and Java 1.2:Advanced Graphics

To access the contents, click the chapter and section titles.

Platinum Edition Using HTML 4, XML, and Java 1.2
(Publisher: Macmillan Computer Publishing)
Author(s): Eric Ladd
ISBN: 078971759x
Publication Date: 11/01/98

Table of Contents

ISMAP and USEMAP

Imagemaps are clickable images that load different pages depending on where you click the image. They are frequently found on the main page of a site, where they typically serve as a navigational tool to the major sections of the site.

• See “Imagemaps,” p. 137.

The ISMAP attribute of the <IMG> tag is a standalone attribute that tells the browser that the image is to be used as part of a server-side imagemap.

The USEMAP attribute of the <IMG> tag is set equal to the name of a client-side imagemap. With client-side imagemaps, map information is named and sent directly to the browser. Setting USEMAP equal to a map name instructs the browser to use the map information associated with that name.

LONGDESC

The LONGDESC attribute was added to HTML 4.0 as a way of making image content more accessible to users with nonvisual browsers. You set LONGDESC equal to the URL of a document that can provide a longer description of the image’s content than you would otherwise put in an ALT attribute. A speech- or Braille-based browser could then access the URL and furnish a description of the image to the user.

Images as Hyperlink Anchors

As explained in Chapter 3, “HTML 4.0 Tag Reference,” the <A> container tag is used to create hypertext anchors. By clicking the hypertext, you instruct your browser to load the resource at the URL specified in the HREF attribute of the <A> tag.

No law says that hyperlink anchors can only be text. You will often find images serving as anchors, as well. By linking images to other Web pages, you create a button-like effect—the user clicks the button and the browser loads a new page, submits a form, or performs some other action. You can even rig a linked image with JavaScript to submit a form:

<IMG SRC=”...” onClick=”document.form_name.submit();”>

To use a graphic as a hyperlink anchor, put the <IMG> tag that places the graphic between <A> and </A> tags:

<A HREF=”button.html”>
<IMG SRC=”images/button.gif” ALT=”Push button”></A>

This results in the linked image shown in Figure 5.7. Notice that the image has a border even though no BORDER attribute was specified. Hyperlinked images automatically receive a border colored with the same colors that you set up for hypertext links using the LINK, VLINK, and ALINK attributes of the <BODY> tag.


	Borders around hyperlinked images are usually distracting, especially if the image is a transparent GIF. Notice in Figure 5.7 how the border shows the extent of the otherwise transparent bounding box around the image. To eliminate the border, include BORDER=0 inside the <IMG> tag.


	TROUBLESHOOTING
	A small, hyperlinked line is present at the bottom right of my linked images. How do I get rid of it?
	Your problem most likely stems from HTML code such as the following: <A HREF=”pickupday.html”> <IMG SRC=”ea1.jpg” WIDTH=300 HEIGHT=400 ALT=”Eric and Anthony”> </A>
	By having a carriage return after the <IMG> tag but before the </A> tag, you often get an extraneous line at the bottom-right corner of the linked image (see Figure 5.8). By placing the </A> tag immediately after the <IMG> tag, you can take care of that annoying little line. <A HREF=”pickupday.html”> <IMG SRC=”ea1.jpg” WIDTH=300 HEIGHT=400 ALT=”Eric and Anthony”></A>

FIGURE 5.7 A hyperlinked image will automatically receive a border unless you specify BORDER=0.

FIGURE 5.8 Browsers don’t always ignore carriage returns, as evidenced by the extraneous line at the bottom right of this linked image.

Images as Bullet Characters

Some people opt to create their own bullet characters for bulleted lists instead of using the characters that browsers provide. To do this, you need to place the bullet graphic with an <IMG> tag and follow it with a list item:

<IMG SRC=”bullet.gif” WIDTH=12 HEIGHT=12 ALT=”*”>HTML 4.0<BR>
<IMG SRC=”bullet.gif” WIDTH=12 HEIGHT=12 ALT=”*”>XML 1.0<BR>
<IMG SRC=”bullet.gif” WIDTH=12 HEIGHT=12 ALT=”*”>Java 1.2<BR>
<IMG SRC=”bullet.gif” WIDTH=12 HEIGHT=12 ALT=”*”>JavaScript 1.3<BR>

Using an asterisk (*) as the value of your ALT attribute gives users with nongraphical browsers a bullet-like character in front of each list item.

Several things should be noted about this HTML:

• You must have a separate <IMG> tag for each bullet.

• You may need to experiment with the ALIGN attribute to find the best alignment between bullets and list items.

• You have to place line breaks manually with a <BR> tag at the end of each list item.

Usually, this is enough to deter many page authors from using their own bullet characters. If you are still determined to use custom bullets, however, you need to be aware of one more alignment issue: If a list item is long enough to break to a new line, the next line starts below the bullet graphic; it is not indented from it (see Figure 5.9). This detracts from the nicely indented presentation that users expect from a bulleted list.

One way to avoid this problem is to make list items short enough to fit on one line. If that isn’t possible, you should consider setting up your list with custom bullets in an HTML table. By placing the bullet image in its own cell and the list item text in the adjacent cell in the same table row, you can control both alignment and line breaking.

• See “Tables,” p. 183.

Images as Horizontal Rules

Some sites also use a custom graphic in place of a horizontal rule (see Figure 5.10). This is a nice way to subtly reinforce a site’s graphic theme.

Table of Contents

Products | Contact Us | About Us | Privacy | Ad Info | Home

Use of this site is subject to certain Terms & Conditions, Copyright © 1996-2000 EarthWeb Inc.
All rights reserved. Reproduction whole or in part in any form or medium without express written permission of EarthWeb is prohibited. Read EarthWeb's privacy statement.