Page 1 of 1

Imagemap Tutorial Rate Topic: -----

#1 macosxnerd101   User is offline

  • Games, Graphs, and Auctions
  • member icon

Reputation: 12657
  • View blog
  • Posts: 45,831
  • Joined: 27-December 08

Post icon  Posted 15 November 2009 - 01:18 PM

For those of you familiar with Object Oriented Programming Principles, using Imagemaps may come fairly easily. In a nutshell, Imagemaps are used to describe properties of sections of the given image. One common use of Imagemaps includes defining a navbar out of a single image. So for example, one section of the image would link to the Home page, the second links to the About Us page, etc. All this is done using only one image.

So let's get started. The first thing we need to do is define an image using the <img/> tag.
<img src="imageName.jpg" width="500" height="500" type="image/jpg" usemap="#imagemap" border="0"/>

Some important attributes we using include usemap, width, height and border. The usemap attribute tells the img to use a certain map, noting that the # symbol directs the img to look for a map in the same page. The # symbol is then followed by the name of the map. The width and height attributes are important because it forces the image to conform to certain dimmensions, which are helpful when describing sections of the image and standardizing the appearance of the image in the various browsers. The last notable attribute to point out in the img tag is the border attribute. Note that if you do not specify the border="0" part, then a border will appear when using the <map> tag.

Now onto the <map> tag. Let's start off with an example to look at.
<map name="imagemap">
   <area href="page1.html" alt="altText1" shape="rect" coords="x1,y1,x2,y2"/>

The <map> tag looks simple enough, right? Well the good news is that the <map> tag itself doesn't get more complicated than using the name attribute. However, the <area> tag is what confuses most people. So let's start here.

The <area> tag is quite simply a hybrid of the <a> and <img> tags, and it is self-closing. You can have as many
<area> tags as you want- just make sure that they don't go beyond the bounds of the image. So, let's start off with
the important attributes and go from there. As we see above, the attributes we care about are href, alt, shape and coords; however, the only attributes we need for the <area> tag are coords and shape.

Starting off with the coords attribute, it should be pretty self explanatory. It takes the parameters enclosed in double quotes & separated by commas. The coordinates are in the format x1,y1,x2,y2 and are used in defining the outline or perimeter of the segment if the shape is a rectangle. If the shape is a circle, then the coords are "x1,y1, radius." And lastly, if the shape is a polygon, use the coordinate system "x1,y1,x2,y2..xn,yn" to outline the edge of the polygon.

The shape attribute is used in conjunction with coords to describe the shape of the section on the image. The four possible parameters include default, rect, circle and poly. Default specifies the entire image, rect specifies a rectangular region, circle specifies a circular region, and poly defines a polygonal region.

The href attribute works in the same way as in the <a> tag, allowing for the use of hyperlinks within sections of an image. The alt attribute works in the same way as in the <img> tag, providing alternate text for the specified section of the image.

Is This A Good Question/Topic? 0
  • +

Page 1 of 1