You are here --> [Image Mapping and Editing - Importance of Being Unique] --> Jump To Article
HTML Made Simple
Author: Mike Ware
Website: [warebiz] :: "The Programmer's Domain" - http://warebiz.tripod.com/
Email: warebiz@yahoo.com
Copyright © 2002 Michael Shawn Ware, All Rights Reserved.
TABLE OF CONTENTS
***************************************************************************************
--> Getting Started with HTML - First Things First
--> Ground Zero - Where Do I Begin?
--> HTML Tags - It's All About Tags
--> Character Formatting - How to Spice Up Text
--> HTML Lists - Looking Sharp and Organized
--> Hyperlinks - Getting Out and Around
--> HTML Tables - Far From Picnic Tables
--> Displaying Images - Adding Life to Your Pages
--> HTML Forms - Forming What?
--> [Image Mapping and Editing - Importance of Being Unique]
--> Frames - Structuring Static Document Layout
***************************************************************************************
Image Mapping and Editing - Importance of Being Unique
Image Maps / Tricks
-----------------------------
One of the most important aspects of web page and web site creation is devising a unique layout design that catches visitors attention. A web site or web page should have an appropriate title, a logo based on the title, a few matching colors (for links, background colors, border colors, image colors, etc.), additional logos and images depicting document content, and finally an overall layout of some type that organizes and displays content in a unique way to set it apart from other web sites already in existence.
To be a successful image creator, a web designer must become familiar with a high-level paint program such as Paint Shop Pro 5. A web site layout is definitely the most important aspect of being unique, and a paint program plays a huge role in creating unique images. The layout of a web page should also make it very easy for visitors to understand how to navigate through the site by providing easy navigational methods. Many web designers prefer a column on the left side of the web page to be designated as a navigational menu, and others prefer navigational menus extended horizontally across the top of the page. Whatever scenario designers choose, they should ensure visitors will fully understand where the navigational menu is located and how to use it. It may take many attempts to design and create the perfect layout for a web page, but in the end, it is well worth the effort.
When creating and designing images for a web page, keep in mind image mapping. Image maps create linkable sections, or "hotspots", in an image defined in HTML by coordinates of the image. A web page could contain only one image, but the image could have ten "hot" spots on the image used for linking to other web documents. Web URL's are associated with the "hot spots". Image mapping is very useful for navigational menus, table of contents, and toolbars.
From the HTML code point of view, image maps consist of three parts:
Firstly, some place in the HTML source of the body of the document, an image map must be declared using the <map> </map> element. This element has one attribute, name="", which is used to associate a name for the image map. Secondly, the <area> element, which is placed inside the <map> </map> element and can take the following attributes: shape="", coords="", href="", nohref="", and alt="". The shape="" and coords="" attributes define a region on the image. If no shape is specified, the default shape used is rectangle. Finally, the image search <img src=""> element goes in the document wherever the "mapped" image needs to appear. The usemap="#" attribute must be included to specify the name of the image map to use.
Possible Shape Attributes
shape="rect" coords="left-x, top-y, right-x, bottom-y"
shape="circle" coords="center-x, center-y, radius"
shape="poly" coords="x1,y1, x2,y2, x3,y3, ..."
NOTE: x and y are measured in pixels from the left/top of the image.
Image Map Example:
<html>
<head><title></title></head>
<body>
<map name="areas">
<area shape="rect" coords="7,5,71,21" href="http://warebiz.tripod.com/cpp.htm">
<area shape="rect" coords="80,5,143,21" href="http://warebiz.tripod.com/html.htm">
<area shape="rect" coords="154,5,219,22" href="http://warebiz.tripod.com/qbasic.htm">
</map>
<img src="imgmapping.jpg" border="0" usemap="#areas">
</body>
</html>
The above HTML code would produce the following results in a web browser:
Image maps can provide very efficient methods for providing navigational menus and toolbars as well as simply providing useful ways for users to find destinations to their interests. We will explore frames in the next section. Frames allow web designers to divide a web document into a specified number of "sections" or "frames" with each frame representing a web document. Read on for more about frames...
Move on to next topic: Frames - Structuring Static Document Layout
Back to Top