CIS67 Foundations for Creating Web Pages Professor Al Fichera Rev. October 11, 2010—All HTML code brought to XHTML standards.

October 11, 2010 Introducing Image Maps by Professor Al Fichera 2 Image Maps to Navigate An 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! 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

October 11, 2010 Introducing Image Maps by Professor Al Fichera 3 Server-Side Image Maps Basically 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

October 11, 2010 Introducing Image Maps by Professor Al Fichera 4 Client-Side Image Maps On 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 words New York State in the image and the URL appears in the Status Bar below. 4

These are the Image Map Hot Spots October 11, 2010 Introducing Image Maps by Professor Al Fichera 5 This graphic shows the actual Hot Spots used in the Image Map I made for this lecture. Notice that I used more polygon shapes than rectangular or circle shapes. I could have used a circle for Liberty just as well. As you can see, one image can hold several "Hot Spots" quite easily.

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, 2010 Introducing Image Maps by Professor Al Fichera 7 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.

October 11, 2010 Introducing Image Maps by Professor Al Fichera 8 Clearing a Path for an Image Map Depending 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: 8

October 11, 2010 Introducing Image Maps by Professor Al Fichera 9 Anatomy of a Client-Side Image Map Create the tag that defines the different "Hot Spots" on the image. Let's look at this code in detail next. 9

October 11, 2010 Introducing Image Maps by Professor Al Fichera 10 Naming a Client-Side Image Map 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

October 11, 2010 Introducing Image Maps by Professor Al Fichera 11 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 hotspot circle for a circular hotspot poly for a irregular polygon 11

October 11, 2010 Introducing Image Maps by Professor Al Fichera 12 Understanding the rect coords The 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) , ,

October 11, 2010 Introducing Image Maps by Professor Al Fichera 13 Understanding the CIRCLE Coordinates The 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 right edge of the circle, write down the coords. 2. Measure from the left edge to the center of the circle, write down the coords. 3. Subtract the second measurement from the first and you'll have the Radius. HOW FAR OVER? HOW FAR DOWN? WHAT'S THE RADIUS? 13

October 11, 2010 Introducing Image Maps by Professor Al Fichera 14 Understanding the POLY Coordinates The 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, , , 14 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?

October 11, 2010 Introducing Image Maps by Professor Al Fichera 16 Using an Image Map An 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: 16

October 11, 2010 Introducing Image Maps by Professor Al Fichera 17 Typical Image Map Rect Coding This approximates the HTML coding necessary for an multi-coord Image Map to work: Any text placed here will appear at the bottom of the image. 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

October 11, 2010 Introducing Image Maps by Professor Al Fichera 18 Typical Image Map Circle Coding This approximates the HTML coding necessary for an multi-coord Image Map to work: Any text placed here will appear at the bottom of the image. 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

October 11, 2010 Introducing Image Maps by Professor Al Fichera 19 Typical Image Map Poly Coding This approximates the HTML coding necessary for an multi-coord Image Map to work: Any text placed here will appear at the bottom of the image. 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

October 11, 2010 Introducing Image Maps by Professor Al Fichera 20 Image Map Alt, Name and ID Tags This approximates the HTML coding necessary for an multi-coord Image Map to work: Any text placed here will appear at the bottom of the image. 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!

October 11, 2010 Introducing Image Maps by Professor Al Fichera 22 A Simple Secret for Quick Maps To 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. 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!Web page example 22

Image Maps Reviewed Introducing Image Maps by Professor Al Fichera 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