Lecture 7 - Image Maps and Frames_2007_FAII_07

8/14/2019 Lecture 7 - Image Maps and Frames_2007_FAII_07

1/22

Lecture 7 Image Maps and Frames


2/22

Outline

In this Lecture, we continue our discussion of XHTML

Adding multiple links to a single image: Making and using Image Maps

Dividing our page into several frames: The framesetdocument


3/22

Image Maps

You may divide an image into hotspots:

Where each hotspot is a clickable region, which can serve as a link. Such a divided graphics are called imagemaps.

Imagemaps have three components:

1. An ordinary image file (i.e., image.jpg)

2. The usemap attribute, within your images img start tag: This specifies which map to use.

3. A map definition within your HTML document:

This is done using the element.


4/22

Step 1: Mapping Your Image

First, you need to know how big your image is in pixels: In this class, we must do this by hand (no Photoshop!)

Check this via the image Properties, using Windows, as usual.

Next, you will define hot-spots for clicking. You may use:

Circles (circle):

Defined by (x, y, r). Here The circle center = (x,y)

The circle radius = r

Rectangles (rect):

Defined by two points (x1, y1, x2, y2). Here

The upper-left corner: (x1, y1).

The lower-right corner: (x2, y2).

Polygons (poly):

Defined by N points (x1, y1, x2, y2, , xN, yN)

Here, each point (xi, yi) is a cornerof the polygon.

Lets look at an example


5/22

Example: Mapping Your Image


6/22

Step 2: Define Your Image Map

Define your image map using the map element:

Type the following:

areas Here, labelis the name of the mapthis seems a bit repetitive:

The id attribute is required by XHTML for validation;

The name attribute is also required by most browsers to work properly

(i.e., Netscape, Mozilla).

So, you should use both.

Areas refers to the clickable areas you want to define

For fun, in this example, I will use only the id attribute in my map.

And omit the name attribute. As a result, it validates as good XHTML 1.0 Transitional

However, it works only in IE6, not Netscape.

To make it work in Netscape, Opera, and Mozilla: You must also add the attribute: name=fuzzytotoro_map.


7/22

Step 3: Define Your Hotspots

Next, define each clickable area, with the area element: Each area is nested in the map element, and has the form:

Here, attribute alt provides alternative text (as usual); Attribute shape defines the shape of the hotspot (clickable area);

Circle (shape=circle); Rectangle (shape=rect); Polygon (shape=poly)

Attribute coords provides details of the shape: For a circle: c= x,y,r Rectangle: c = x1,y1,x2,y2, etc

Attribute hrefdefines the destination URL (as usual).

We also have some optional attributes (some New Ideas):

Attribute target lets you target a different browser window. Defines the browserwindow where the page should appear.

This will be useful when we start using Frames (more later).

Attribute accesskey provides a keyboard shortcut to access the link Example: accesskey=w

On Windows systems, to access the link, type Alt w.


8/22

Step 4: Add Your Image

Next, add your image, as usual, using the img element:

Attribute src specifies the image (as usual);

Attribute usemap specifies the image map to use You should specify your image map, from Step 2;

This is done by the value, #label.

Here, # indicates a reference to a named element;

labelis the name (id) of the referenced element:

(the image map you named in Step 2).


9/22

Image Map Example


10/22

Dividing Your Page into Frames

So far, our Web pages have had the ability to link to other pages But, could only display one page at a time.

However, you may desire to divide a page into separate windows Each allowing your visitor to see multiple pages at the same time.

Each such Window is a called Frame. Example: A page with 3 frames:

1 Banner: top frame to show the page logo; 1 Index: left frame to hold links; 1 Content Frame: to display the pages corresponding to selected links.

Such windowed pages are supported by theframeset You first create a frameset document.

Providing the necessary definitions for each window frame:

where and how big each frame will be (within the frameset). Again: think of a frameset as a Window holding several panes.

You then add each separate XHTML document using frame.

Before discussing Framesets, lets briefly discuss thedisadvantages.

----


11/22

The Disadvantages of Frames Frames have been controversial since their introduction:

(way back, with Netscape 2.0).

The use of frames presents a number of disadvantages: For Users: Difficult to bookmark*. For Search Engines: Can be hard to find and catalog*. For the Server: Bigger computational load.

Many big companies thus have a no frames rule Your client may insist on no frames at the first meeting.

W3C discourages the use of Frames Not (yet) supported in XHTML 1.1

Instead, they recommend CSS to get the same effect much more elegant...

However, Frames are still very popular: Widely used on the Internet. Supported by most browsers. Disadvantages * can be overcome with JavaScript (next course).

We still have reasonable support for framesets with XHTML 1.0 The XHTML 1.0 Frameset document type definition:

provides full support for the frameset element.

Lets learn Framesets using a simple example


12/22

A Simple Frameset Document


13/22

Adding and Nesting Frames


14/22

Controlling Frame Borders By default, browsers automatically separate frames:

By placing space between them

Default value = 5 pixels. This is somewhat similar to cellspacing, in tables

However, the browser also fills this space with sculpted borders.

The frame element has an attribute for controlling borders: The frameborderattribute lets you turn on/off the sculpted borders:

Here, value v is either 1 or 0 (or, yes or no). Value 0 (no) eliminates the sculpted borders for all browsers

But not the accompanying spacing between the frames.

Note: you may also use frameborderat the frameset level However, it does not validate.

Two authors mention the border attribute forframeset However, it is non-standard for XHTML (not well-supported)

In principle, borders may be removed via the border property (CSS): Using the style-rule: frame{border:0}; However, use for frames is non-standard, with limited support.


15/22

Controlling Frame Margins

Browsers also place a margin between the frame and its contents.

This is a bit similar to cellpadding, in XHTML tables However, here the space is only between frames:

(not between frames and the frameset border). Extra-border space is called cellpadding in the box model (CSS), also.

Default value = 8 to 15 pixels.

The frame element has two attributes for controlling margins: :

Here, marginwidth : controls space on frame sides;

Similarly,marginheight : controls space on frame top and bottom.

For each, values x, y are in pixels.

Side-Note: To keep visitors from re-sizing a frame: Add the noresize attribute to the frame tag:

noresize=noresize


16/22

Example: Frame Borders/Margins


17/22

Targeting Links to Particular Frames

Each frames initial content is given in its src attribute.

However, you may wish to have other pages appear in that frame... As directed by a link, in another frame.

Example: we may wish to have examples appear in our content frame.

When selected by a user in our left-hand List frame.

This is accomplished using the target attribute ofa :

text Here:

page.html= the file that should be displayed in the target frame;

target = the frame where the file should appear (= target frame) As specified via the name attribute of the targets frame element.

Note: By default, target = _self Thus, any link clicked in a frame:

By default, causes the linked page to appear in that frame.

Unless you must specify a different target frame.


18/22

Some Special Targets

Many times you will wish to make links open in a particular frame

Example: Making links clicked in a left-border frame open in a central content frame.

This is done by specifying a specific target (as shown in the last page).

However, other special behaviors are also possible:

To make the link open in a new, blank window:

target = _blank

To make the link open in the page, itself:

target = _self

To make the link break out of the current window... And use the entire current browser page:

target = _top

To make the link open in the frameset that contains the current frame: target = _parent


19/22

Changing a Frames Default Target

The default target for all links in any frame is the frame itself:

i.e., Default: target = _self. Thus, any link clicked in a frame:

causes the linked page to appear in that frame unless you specify an alternative target for the link.

However, you do not have to specify each links target

separately You may change the default target for every link in a page

Using the base element, which has the form:

Here, name identifies the html pages new default target.

Note: the base element should be placed in the pages head section.


20/22

Example: Left-hand Document List


21/22

Midterm Test (Friday)

The midterm test will be this Friday (in class):

The exam will be written and closed book.

It will include questions which cover our lecture material Roughly 30 questions.

Topics: Lectures 1-7 (The Internet/Web, Browsers, XHTML, etc)

Format: Multiple-choice and/or Fill-in-the-blank


22/22

Conclusion

In this Lecture, we have continued our discussion of XHTML

Adding multiple links to a single image:

Image Maps

Dividing your page into several frames:

The framesetdocument

After next lecture (practice session), we will continue:

And begin our discussion ofCascading Style Sheets.

Documents

Lecture 7 - Image Maps and Frames_2007_FAII_07