The Wayback Machine - https://web.archive.org/web/20100601133512/http://www.webreference.com:80/html/tutorial12/6.html


spacer

Webref WebRef   Sitemap · Experts · Tools · Services · Newsletters · About i.com

home / experts / html / tutorials / 12 / 6

index123456789exercises1

Tutorial 12: Embed with HTML - Page 6

Developer News
Windows Server AppFabric, BizTalk Near Debut
Google: Over 100,000 Android Activations Daily
Novell Updates SUSE Linux Enterprise 11

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="http://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

Internet.com
The Network for Technology Professionals

Search:

About Internet.com
Copyright 2010 QuinStreet Inc. All Rights Reserved.

Legal Notices, Licensing, Permissions, Privacy Policy.
Advertise | Newsletters | E-mail Offers

webref The latest from WebReference.com Browse >
A Sitemap Makes Your Website More Google Friendly · Locale-sensitive Operations and Services in International Java Applications · Create Any Type of Form You Like on Your WordPress Site
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
May Madness - Fascinating Acquisitions Surrounding IBM DB2 and Sybase · Small Business Marketing: Customer Service Gone Wrong · Google Predicts Mobile Ad Surge as AdMob Deal Closes

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

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

Morty Proxy This is a proxified and sanitized view of the page, visit original site.