Upload
curlicue
View
216
Download
0
Embed Size (px)
Citation preview
8/14/2019 Lecture 7 - Image Maps and Frames_2007_FAII_07
1/22
Lecture 7 Image Maps and Frames
8/14/2019 Lecture 7 - Image Maps and Frames_2007_FAII_07
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
8/14/2019 Lecture 7 - Image Maps and Frames_2007_FAII_07
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.
8/14/2019 Lecture 7 - Image Maps and Frames_2007_FAII_07
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
8/14/2019 Lecture 7 - Image Maps and Frames_2007_FAII_07
5/22
Example: Mapping Your Image
8/14/2019 Lecture 7 - Image Maps and Frames_2007_FAII_07
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.
8/14/2019 Lecture 7 - Image Maps and Frames_2007_FAII_07
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/14/2019 Lecture 7 - Image Maps and Frames_2007_FAII_07
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).
8/14/2019 Lecture 7 - Image Maps and Frames_2007_FAII_07
9/22
Image Map Example
8/14/2019 Lecture 7 - Image Maps and Frames_2007_FAII_07
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.
----
8/14/2019 Lecture 7 - Image Maps and Frames_2007_FAII_07
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
8/14/2019 Lecture 7 - Image Maps and Frames_2007_FAII_07
12/22
A Simple Frameset Document
8/14/2019 Lecture 7 - Image Maps and Frames_2007_FAII_07
13/22
Adding and Nesting Frames
8/14/2019 Lecture 7 - Image Maps and Frames_2007_FAII_07
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.
8/14/2019 Lecture 7 - Image Maps and Frames_2007_FAII_07
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
8/14/2019 Lecture 7 - Image Maps and Frames_2007_FAII_07
16/22
Example: Frame Borders/Margins
8/14/2019 Lecture 7 - Image Maps and Frames_2007_FAII_07
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.
8/14/2019 Lecture 7 - Image Maps and Frames_2007_FAII_07
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
8/14/2019 Lecture 7 - Image Maps and Frames_2007_FAII_07
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.
8/14/2019 Lecture 7 - Image Maps and Frames_2007_FAII_07
20/22
Example: Left-hand Document List
8/14/2019 Lecture 7 - Image Maps and Frames_2007_FAII_07
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
8/14/2019 Lecture 7 - Image Maps and Frames_2007_FAII_07
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.