eXtropia: the open web technology company
Technology | Support | Tutorials | Development | About Us | Users | Contact Us
Resources
 ::   Tutorials
 ::   Presentations
Perl & CGI tutorials
 ::   Intro to Perl/CGI and HTML Forms
 ::   Intro to Windows Perl
 ::   Intro to Perl 5
 ::   Intro to Perl
 ::   Intro to Perl Taint mode
 ::   Sherlock Holmes and the Case of the Broken CGI Script
 ::   Writing COM Components in Perl

Java tutorials
 ::   Intro to Java
 ::   Cross Browser Java

Misc technical tutorials
 ::   Intro to The Web Application Development Environment
 ::   Introduction to XML
 ::   Intro to Web Design
 ::   Intro to Web Security
 ::   Databases for Web Developers
 ::   UNIX for Web Developers
 ::   Intro to Adobe Photoshop
 ::   Web Programming 101
 ::   Introduction to Microsoft DNA

Misc non-technical tutorials
 ::   Misc Technopreneurship Docs
 ::   What is a Webmaster?
 ::   What is the open source business model?
 ::   Technical writing
 ::   Small and mid-sized businesses on the Web

Offsite tutorials
 ::   ISAPI Perl Primer
 ::   Serving up web server basics
 ::   Introduction to Java (Parts 1 and 2) in Slovak

 

Introducton to Web Design
Defining Image Maps  
  • Image Maps can be defined in two ways.

  • The first way is to use one of the various shareware programs available to create a map file that can be read by a CGI program on your web server.

  • However, since most people do not have the privilege of executing CGI applications, the developers of HTML came out with the <MAP> tag to allow HTML designers to create client-side image maps.

  • The <MAP> tag allows a designer to embed information about the image within the HTML code itself. Thus, the browser is able to decide what areas of the image are hot-linked without using a server CGI script.

  • Client-side image maps introduce two tags(<MAP>, <AREA>) and the USEMAP attribute for the <IMG> tag.

  • The tags and attribute are described in the table below

NAME DESCRIPTION
MAP Defines an image map. Takes an attribute of NAME that is used to tie an image to a map
AREA Specifies a clickable area. Takes a SHAPE attribute of POLY, CIRCLE, or RECT, a COORDS attribute that specifies the area to be made clickable, and an HREF attribute that specifies the anchor URL for user clicks.
USEMAP Used within the <IMG> tag to specify a map to use. This value will correspond to the value of NAME in the <MAP> tag

  • To define an image map, you will use the <MAP> tag. This tag takes an attribute that defines the name of the map. The name is necessary so that you can tie a specific image to its corresponding map in case you have more than one image map on a page.

  • To define clickable areas within the image, you use the <AREA> tag with its corresponding SHAPE, COORDS and HREF attributes.

  • The shape attribute specifies a circle, rectangle, or a polygon. The COORDS attribute specifies the points that define those shapes. The HREF specifies the URL that should be linked to if the given shape is clicked on.

  • A POLY shape will take a set of x/y coordinates to use as the dots in a connect-the-dot game. For example, the following AREA description would make a triangle:

    <AREA SHAPE = "POLY"
         COORDS = "0,0,  10,10,  0,20"
         HREF = "poly.html">
    

  • The RECT works just the same except that it expects four sets of points whereas the POLY does not care.

  • Finally, the CIRCLE shape takes a center point and radius such as in the following example that creates a circle area centered at 10,10 with a radius of 30 pixels

    <AREA SHAPE = "CIRCLE"
             COORDS = "10,10,  30"
             HREF = "circle.html">
    

  • In addition you can use NOHREF instead of HREF to specify that the area does not link anywhere.
  • Once you have defined the clickable areas of your image, you need to tie the image to the mappings. To do so, you specify the map name in the USEMAP attribute of the <IMG> tag.
  • Let's take a look at the code for the Selena Sol Homepage imagemap.

    <IMG SRC = "Graphics/sol_frontpage.gif"
              BORDER = "0" WIDTH = "365"
              HEIGHT = "273"
              ALT = "[Navigation Image Map.]"
              USEMAP = "#solmap">
    
    <MAP NAME = "solmap">
    <AREA SHAPE = "rect" HREF = "Personal/"
               COORDS = "1,1 96,24">
    <AREA SHAPE = "rect" HREF = "Personal/Resume/"
               COORDS = " 212,47 254,60">
    <AREA SHAPE = "rect" HREF = "Personal/creations.html"
               COORDS =  "214,62 317,73">
    <AREA SHAPE = "rect" HREF = "Scripts/"
               COORDS = " 291,77 365,103">
    <AREA SHAPE = "rect" HREF = "Library/Struggle/"
                COORDS = " 0,89 113,115">
    <AREA SHAPE = "rect" HREF = "Library/"
              COORDS = " 211,144 360,169">
    <AREA SHAPE = "rect" HREF = "Library/Barnaby/"
              COORDS = " 1,201 77,220">
    <AREA SHAPE = "rect" HREF = "Launchpad/"
              COORDS = " 233,175 340,206">
    <AREA SHAPE = "rect" HREF = "kudos.html"
              COORDS = " 87,224 142,243">
    </MAP>
    

Previous Page | Next Page