cis67 foundations for creating web pages professor al fichera rev. october 11, 2010—all html code...

C I S 6 7F o u n d a ti o n s fo r C r e a ti n g We b

Pa g e sProfessor Al Fichera

INTRODUCING IMAGE MAPS

Rev. October 11, 2010—All HTML code brought to XHTML standards.

October 11, 2010Introducing Image Maps by Professor Al Fichera http://profal2.com2

Image Maps to NavigateAn Image Map can be any Web page image. The object is

to place "hot spots" on the image that will allow your viewer to hypertext link to another part of the page or elsewhere on the Web.

Let's take a look at the Image Map used for this lecture: Welcome to New York!Perhaps you should know, the Image Map I'm using was the

original Welcome to New York site back in the early 90's. The Image Map links have been replaced with images by me.

2

http://cis67.info/DEMOs/imagemap.html


Server-Side Image MapsBasically a Server-Side Image Map is in the computer that

stores the Web page.These maps can be slow to operate because each time a

user clicks a "hot spot," the request must be handled by the server.

Plus, there will be no visual clue in the status bar as to where the hyperlink will point to.

3


Client-Side Image MapsOn a Client-Side Image Map all the information once

downloaded is stored locally by the browser.The up-side is it will be much faster to operated.The status bar shows the intended destination of the

hyperlink when your mouse passes over a "hot spot".In this example, I placed my

mouse over the wordsNew York State in the imageand the URL appears in the Status Bar below.

4

Introducing Image Maps by Professor Al Fichera http://profal2.com

These are the Image Map Hot Spots

October 11, 20105

This graphic shows the actual Hot Spots used in the Image Map I made for this lecture.

Notice that I used more polygonshapes than rectangular or circle shapes.

I could have used a circle for Liberty just as well.

As you can see, one image canhold several "Hot Spots" quiteeasily.

I know now your curious, how do you determine the actual Hot Spot Coordinates?

Just wait a minute and I'll tell you.

HOW DO I GET THE HOT SPOTS?


Let's Get Started

October 11, 20107

There are a few steps that you'll need to know about first.The balance of this lecture will cover:

Clearing a path to the Image Map.Identifying that an Image is linked to an Image Map.Creating the Area Shapes that will become Hot Spots.Learn the proper syntax when writing the Image Map

code.


Clearing a Path for an Image MapDepending upon how much activity you have on your

page, sometimes it's a good idea to clear a path for your Image Map. However, this is your choice.

The CLEAR property starts the next line on the page at the first point at which the page margin is clear of text and/or images.For example, write the code as:<br clear="left" />

8


Anatomy of a Client-Side Image MapCreate the <map> tag that defines the different "Hot

Spots" on the image.<map name="name of the map goes here">

<area shape="shape" coords="coordinates" href="URL goes here" />

</map>

Let's look at this code in detail next.

9


Naming a Client-Side Image Map<map name="name of the map goes here">

This is where you'll choose a name that describes your Image Map, perhaps it will be called "navigate" or "mainmap" or something similar.

10


Identify the Image Map Area Shape <area shape="shape"

This is where you determine the shape of the "hotspot", it will be rectangular, circular, or polygonal.The property tags for shape will be referred to by:rect for a rectangular hotspotcircle for a circular hotspotpoly for a irregular polygon

11


Understanding the rect coordsThe syntax for the Rectangular hotspot coordinates shown

below is: (What out where you put the double quotes in the coords.)<area shape="rect" coords="18,18, 430,135"

Lower right x, y coords(How far over, how far down)

Upper left x, y coords(How far over, how far down)

0 450

0

152

18, 18

430, 135

12


Understanding the CIRCLE CoordinatesThe syntax for the Circular hotspot coordinates shown

below has three coords: <area shape="circle" coords="110,115,50" Utilize the x, y center axis

plus the radius of the circle.How do you get the radius? Easy, follow these steps!

1. Measure from the left edge to the rightedge of the circle, write down the coords.

2. Measure from the left edge to the centerof the circle, write down the coords.

3. Subtract the second measurement fromthe first and you'll have the Radius.

HOW FAR OVER?HOW FAR DOWN?WHAT'S THE RADIUS?

13


Understanding the POLY CoordinatesThe syntax for the Polygonal hotspot coordinates shown

below is: (Tip: Place a space between each of the two coords.)<area shape="poly" coords="90,14, 16,91, 90,168, 324,168, 396,91, 324,14"

x, y coordinates(How far over, how far down)

324, 168

396, 91

324, 14

90, 168

90, 14

16, 91

14

I know, you really want to know how to do this, but you have to trust me, it's coming!

So in a minute or two and I'll tell you.

AGAIN, THE COORDINATES?


Using an Image MapAn important step in adding an Image Map to a Web page

is to add the usemap property to the img src tag for the image map graphic.

You'll type the name chosen in the map code as the usemap name.This is the proper syntax:<img src="image name" usemap="#mapname" alt="description" width="?px" height="?px" />

16


Typical Image Map Rect CodingThis approximates the HTML coding necessary for an

multi-coord Image Map to work:<img src="image.gif" usemap="#mapname" />

Any text placed here will appear at the bottom of the image.

<map name="mapname">

<area shape="rect" coords="#,#, #,#" href="url.html" alt="?" name="?"

id="?" />When you create a rectangular shape, there are only four (4)

coords.You can have as many rectangular shapes in the Image Map as you

need.

17


Typical Image Map Circle CodingThis approximates the HTML coding necessary for an




<area shape="circle" coords="#,#,#" href="url.html" alt="?" name="?" id="?" />When you create circle coords, there are only three coords needed.You may have as many circle coords in your Image Map as you

need.

18


Typical Image Map Poly CodingThis approximates the HTML coding necessary for an




<area shape="poly" coords="#,#, #,#…." href="url.html" alt="?" name="?"

id="?" />When you create polygon shapes, there will be many, many coords

to use for each shape.Just be sure to end up with an even amount of coords, that's why I

suggest using a space between each set of two coords.

19


Image Map Alt, Name and ID TagsThis approximates the HTML coding necessary for an




<area shape="rect" coords="#,#, #,#" href="url.html" alt="description"

name="description" id="description" />

</map>Note: Content for alt, name, and id are the same, just

copy/paste the description.Be sure to use the trailing space and forward slash to close the

area shape coding.

20

Well I guess it's time to show you how to do this; don't be disappointed when you see how

simple it is to accomplish! Here goes…

THE COORDINATES, NOW!


A Simple Secret for Quick MapsTo get any coordinate quickly, you can add the following

snippet of code to your page with the Image to be used in the Image Map. Note: You'll discard this later.

<a href="nothing"><img src="image name goes here" ismap="ismap" /></a>

The ismap will provide coordinates in the status bar on the lower left of your browser window, just copy them down. These numbers represent how far over from the left edge of the

image, and how far down from the top edge.Let's look at that Web page example again please!

22

http://cis67.info/DEMOs/imagemap.html


Image Maps Reviewed

23

Image Maps can be created without expensive programs.Use the ismap="ismap" server-side trick to get "coords".Use Image Maps when only certain portions of an image may

require a hyperlink.You may have more than one Image Map on the page.Check to see that you have the correct "coords" needed

before springing the Image Map on your visitors!Be sure to close the area tag properly with a space/slash.Have some fun thinking up how an Image Map might be

suitable for one of your Web pages.

October 11, 2010

cis67 foundations for creating web pages professor al fichera rev. october 11, 2010—all html code...

Documents