Lecture 7 – Image Maps and Frames

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 frameset document
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 image’s img start tag:
 This specifies which map to use.
3. A ‘map definition’ within your HTML document:
 This is done using the <map> element.
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 corner of the polygon.
 Let’s look at an example…
Example: Mapping Your Image
Step 2: Define Your Image Map
 Define your image map using the map element:
 Type the following:
<map 　 name=“label” id=“label”>…areas…</map>
 Here, label is the name of the map…this 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”.
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:
<area alt=“info” shape=“type” coords=“c”
href=“url” target=“name” accesskey=“x” />
 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 href defines 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 browser window 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’.
Step 4: Add Your Image
 Next, add your image, as usual, using the img element:
<img alt=“text” src=“image.jpg” usemap=“#label” />
 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;
 label is the name (id) of the referenced element:
 (the image map you named in Step 2).
Image Map Example
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 the frameset …

 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 the
disadvantages.
 ----
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.
 Let’s learn Framesets using a simple example…
A Simple Frameset Document
Adding and Nesting Frames
 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 frameborder attribute lets you turn on/off the sculpted borders:
<frame name=“name” src=“*.html” frameborder=“v” />

 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 frameborder at the frameset level…

 However, it does not validate.
 Two authors mention the “border” attribute for frameset
 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.
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: :
<frame name=“name” src=“*.html” marginwidth=“x” marginheight=“y” />

 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”
Example: Frame Borders/Margins
Targeting Links to Particular Frames
 Each frame’s 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 of a :
<a href=“page.html” target=“name”> text </a>
 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 target’s 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.
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”
Changing a Frame’s 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 link’s target
separately…
 You may change the default target for every link in a page…
 Using the base element, which has the form:
<base target=“name” />

 Here, name identifies the html page’s new default target.

 Note: the base element should be placed in the page’s head section.
Example: Left-hand Document List
 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
 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 frameset document
 After next lecture (practice session), we will continue:
 And begin our discussion of Cascading Style Sheets.