Chapter 6 Frames and Image Maps Frame sets and frames Image Maps

Chapter 6 Frame Basics Frames divide a page into separate entities.

Chapter 6 Frame Basics A frame-based page requires a separate file for the frame set (basic.html) and each frame (frame1.html, frame2.html)

Chapter 6 The Frame Set Page The … tags form a container for the frame set. A tag is required for each frame. … tags specify alternate text for non-frame browsers. A Frame set page may use three tags. The first two tags are required.

Chapter 6 The Frameset Page <FRAMESET COLS = “20%, *”> This frame set divides the page vertically. The first frame occupies 20% of the width. The second frame uses the remaining 80%.

Chapter 6 The Tag SRC= “” : Specifies URL of the frame. NAME= “” : Name is a TARGET of an tag. NORESIZE : Don’t resize frame. SCROLLING = “NO”| “YES” | “AUTO” : Specifies presence of scrollbars. The tag contains these attributes.

Chapter 6 The Tag <FRAME SRC = “frame1.html” NAME = “leftFrame”> The tag indicates the source for the leftmost frame.

Chapter 6 The TARGET Attribute The left frame contains tags specifying the right frame as the target. <A HREF = “illinois.html” TARGET = “rightFrame” > Illinois

Chapter 6 Horizontal Frames <FRAMESET ROWS = “50%,*” BORDER = “0”> This frame set divides the page horizontally. A BORDER value of 0 removes the border.

Chapter 6 Combined Frames <FRAMESET ROWS = “50%,*” COLS = “50%,*”> This frame set divides the page horizontally and vertically.

Chapter 6 Combined Frames <FRAMESET ROWS = “25%,*” BORDER = “0%”> <FRAMESET COLS = “25%,25%,25%, *”> The first frame set is used to place the directions in the top frame and the check lists in the bottom.

Chapter 6 Combined Frames <FRAMESET ROWS = “25%,*” BORDER = “0%”> <FRAMESET COLS = “25%,25%,25%, *”> The second frame set divides the top frame into four frames.

Chapter 6 Image Maps The … tags form a container for the tags. The tags define the clickable regions. The tag contains the source image for the map. An image map contains clickable regions that are used to load pages into a frame. Tags uses for image maps are:

Chapter 6 Image Maps The top frame contains the image map.

Chapter 6 Image Maps The tag forms a container for the clickable regions. …

Chapter 6 The Tag SHAPE defines the shape of the area. COORDS lists the coordinates for the shape. ALT contains alternate text. HREF contains the file to be loaded when the region is clicked. TARGET loads the page into a frame. An tag can contain these attributes:

Chapter 6 Rectangular Areas A rectangular area requires (x,y) coordinates for the top left and lower right corners.

Chapter 6 Circular Areas A circular area requires (x,y) coordinates for center point and the radius.

Chapter 6 Polygonal Areas A polygonal area requires (x,y) coordinates for each point on the polygon. The first and last points should be the same.

Chapter 6 Default Areas A default area is used to handle mouse clicks that fall outside any region. The default area for the shapes image map is:

Chapter 6 The Tag The tag links the image map and the image. The tag for the shapes image map is: