The Wayback Machine - https://web.archive.org/web/20081204103416/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
Google Chrome Playing Catch-Up on Extensions
Open Solutions Alliance Gets New Leadership
Red Hat Spacewalk Expands Linux Management

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.comearthweb.comDevx.commediabistro.comGraphics.com

Search:

Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia

Jupitermedia Corporate Info

Copyright 2008 Jupitermedia Corporation All Rights Reserved.

Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Tech Jobs | Shopping | E-mail Offers

Whitepapers and eBooks

Symantec Whitepaper: Converging System and Data Protection for Complete Disaster Recovery
Intel Whitepaper: Comparing Two- and Four-Socket Platforms for Server Virtualization
IBM Solutions Brief: Go Green With IBM System xTM And Intel
HP eBook: Simplifying SQL Server Management
IBM Contest: Are You the Next Superstar? Join the "Search for the XML Superstar" Contest to Find Out
Intel PDF: Quad-Core Impacts More Than the Data Center
Intel PDF: Virtualization Delivers Data Center Efficiency
Go Parallel Article: PDC 2008 in Review
Avaya Article: Communication-Enabled Mashups: Empowering Both Business Owners and IT
Intel Whitepaper: Building a Real-World Model to Assess Virtualization Platforms
PDF: Intel Centrino Duo Processor Technology with Intel Core2 Duo Processor
  Microsoft Article: Build and Run Virtual Machines with Hyper-V Server 2008
Go Parallel Article: Q&A; with a TBB Junkie
IBM Whitepaper: Innovative Collaboration to Advance Your Business
Internet.com eBook: Real Life Rails
IBM eBook: The Pros and Cons of Outsourcing
Internet.com eBook: Best Practices for Developing a Web Site
IBM CXO Whitepaper: The 2008 Global CEO Study "The Enterprise of the Future"
Avaya Article: Call Control XML in Action - A CCXML Auto Attendant
IBM CXO Whitepaper: Unlocking the DNA of the Adaptable Workforce--The Global Human Capital Study 2008
Symantec Whitepaper: Comprehensive Backup and Recovery of VMware Virtual Infrastructure
MORE WHITEPAPERS, EBOOKS, AND ARTICLES
webref The latest from WebReference.com Browse >
Popular JavaScript Framework Libraries: An Overview - Part 3 · Accessing Your MySQL Database from the Web with PHP · Working with the DOM Stylesheets Collection
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
Review: Lenovo ThinkPad SL300 · OCZ PC3-10666 Gold 2x1GB Review · Apple Recommends Antivirus for Macs

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.