Image Maps and Frames

Using images as a link

Recall that you can use an entire image as a single link with code like this:
You can also make a single image include multiple links. This allows you to bring the design of the image into the design of your web site.

<a href=http://www.itt-tech.edu><img src=itt.gif /></a>

Server Side vs. Client Side

Logic can be executed on the client side by the browser or server side by the web server. In the case of image maps, we will be developing client-side image maps in this class. An example of server-side image mapping is mapquest, where only the coordinates are sent to the server, which processes them.

Components of an image map

1.
2.

The image itself Map HTML of coordinates Steps to create an image map
1. 2. 3. 4.

Pick image Sketch hotspots Map coordinates Create HTML

Map area shapes

Rectangular map the coordinates of the two opposite corners Circular map the center of the circle and the radius Polygonal map the coordinates of each corner (regardless of the number of corners) this is the most common.

Writing the code

Denote the location of the map from within the image with the usemap tag Write the <map> with an <area> for each hotspot.

<img src=itt.jpg usemap=ittmap />

<map name=ittmap> <area alt=area 1 shape=rect coords=200,100,400,400 /> <area alt=area 2 shape=rect coords=400,100,800,400 /> </map>

Defining Area coords

rect

Upper left X, Y, Lower Right X, Y Center X, Y, radius X1,Y1,X2,Y2,X3,Y3,,XnYn

circle

poly

Frames

Reasons for using frames

Keep a pane constant Navigation can be kept constant Allows you to show multiple pages or frame another site within yours
Refreshing the screen takes you to initial state Framing other sites is not nice Keeping a constant part of the screen can be wasteful, but you can maintain a section of the screen as a constant using css if you insist.

Reasons not to use frames

Working with Frames in Browser

Printing Frames

As laid out on screen Only the selected frame All Frames individually View Source to see frameset Right-click on frame to view source of individual frame

Viewing source

XHTML Frames

In XHTML, frames are pretty much deprecated because you cant use them with the strict doctype However, they have put in a frameset doctype that allows you to use frames Note that the <iframe> tag is deprecated and though the <object> tag is meant to replace it, this tag is not fully supported, so if you must use frames, stick to <frame>

style attribute and CSS

To date, web pages in this class have been rather drab. You have the ability to make them look a whole lot better:

The style attribute allows you to define characteristics of text, tables, and other elements Cascading Style Sheets are a centralization of styles and also enable you to customize the behavior of elements and collections of elements. Examples: hidden/visible, color, font, border, bgcolor

CSS Instead of Frames

CSS gives us the ability to abandon frames. Search Google to see many implementations

CSS frames

Screen Layout Possibilities

Normal HTML: hard to control Frames: problems outlined previously Tables: The standard for layouts
Cascading Style Sheets take control of layouts

Makes frames obsolete Reserves tables for only displaying tabular data Allows dynamic content with DHTML