Tutorial 12: Embed with HTML - Page 6 - HTML with Style | WebReference

Tutorial 12: Embed with HTML - Page 6 - HTML with Style

index123456789exercises1

Tutorial 12: Embed with HTML - Page 6

Acme Computer Corp. Q3 Results

Our third-quarter results are out. The cocktail party to celebrate was just as successful as Q3 itself. Here's a picture of our beloved CEO, Dr. Propellerhead, with the VP for Marketing:

A picture of Arny and Stan smiling for the camera.

The data below shows that our Transfirbulation department has been making some good progress:

Third quarter earnings by department

As you can see, if the browser can't display the images (and it shouldn't, since the URLs in the SRC attributes don't point to images), you're stuck in text-only hell. This isn't very nice, and you can't specify the content type of the image either, which means the browser can't make up its mind about whether it can display the image unless it tries to download it first, which takes extra time and wastes bandwidth. Also note that neither Explorer nor Navigator support the longdesc attribute, so it's largely useless if a user has just turned off image downloading.

A note on image rendering: Most popular browsers will draw a border around images that are part of hyperlinks, to show that they are in fact hyperlinks. Though this is useful, it is not always the desired effect, and unfortunately this border cannot be controlled through CSS. If you want to get rid of this border, you can use the deprecated BORDER attribute, that accepts an integer value that indicates the width of the border in pixels. Setting this to zero will get rid of the border. We'll have a look at this attribute in more detail when we talk about deprecated HTML methods later on. Here's an example of a linked image without a border:

<A HREF="https://www.acme.com/"><IMG 
   SRC="acmelogo.gif" BORDER="0"></A>

Image Maps

One of the things people started using images for was hyperlink heads. This was nice as a diversion, but it also made sense as far as semantics were concerned: Images, or parts of images, can be used as hyperlink heads. An obvious example would be a map, where parts of the map could be linked to information about the region portrayed. This gave rise to what is called an image map.

Image maps designate certain parts of an image as hyperlink heads. They are used a lot in Web pages and can be quite nifty, as long as you take care to observe a few precautions. Image maps are specified using the ISMAP and USEMAP attributes.

Attributes for specifying image maps

ISMAP (boolean)
Specifies that the object has a server-side image map. If the user clicks on the object to follow a link, the co-ordinates of the point where the user clicked will be appended to the link URL.
ISMAP (URI)
Provides the location of the MAP element that specifies the client-side image map for this object.

Server-Side Image Maps

Server-side image maps were the first to be developed, and are a bit of a sticky solution. An example of a server-side image map is the Webreference.com navigation bar, which is seen at the top of every page in Webreference.com. Here's a simplified version of the code used for this image map:

<P><A HREF="/art/index.map"><IMG SRC="/art/bn_wrl_sm.gif" ISMAP></A></P>

index123456789exercises1

Produced by Stephanos Piperoglou

URL: https://www.webreference.com/html/tutorial12/6.html

Created: May 28, 1998
Revised: February 25, 1999