FRAMES AND IMAGES IN HTML

<< TEXT BOXES, CHECK BOXES, RADIO BUTTONS

TAG ATTRIBUTES, SOUNDS FILES, ANIMATIONS >>

E-COMMERCE IT430

Lesson 08

FRAMES AND IMAGES IN HTML

The concept of frames is used to set up a site so that one page remains in view in part of the browser screen

while the visitors can use the rest of the screen to view other pages using hyperlinks.

General format

<Frameset> and <Frame> are the two basic tags. This concept uses two different types of pages

frameset page and content pages. Frameset page divides the browser window into a set of frames and

defines the size of each frame. It also specifies which content pages are displayed in which frame. It has no

body section (no body tag). Content pages are just regular HTML pages.

Dividing the screen horizontally

<HTML>

<HEAD>

<TITLE>Horizontal Frames</TITLE>

</HEAD>

<FRAME>

</FRAMESET>

</HTML>

Result is shown in Fig. 1 below.

Fig. 1

Dividing the screen vertically

<HTML>

<HEAD>

<TITLE>Vertical Frames</TITLE>

</HEAD>

<FRAME>

</FRAMESET>

</HTML>

E-COMMERCE IT430

Result is shown in Fig. 2 below.

Fig. 2

Frames with content - frames.htm <HTML> <HEAD><TITLE>Horizontal Frames with

Content</TITLE> </HEAD> <FRAMESET ROWS="25%,75%"> <FRAME SRC="1.htm"

Name="upper"> <FRAME SRC="2.htm" Name="lower"> </FRAMESET> </HTML> Result is

shown in Fig. 3 below.

Fig. 3

Note that contents of the files 1.htm and 2.htm are displayed in Fig. 6 in the upper and

lower frames, respectively.

Code - 1.htm <HTML> <HEAD><BODY> <H1>This text is from 1.HTM</H1> </BODY>

</HTML> Code - 2.htm <HTML> <HEAD><TITLE>Horizontal Frames with links</TITLE>

</HEAD> <BODY> <H1>This text is from 2.HTM</H1> <H1><A HREF="3.htm"

TARGET="lower">This is a link to 3.HTM</A></H1> </BODY> </HTML>

Note that `target' is an attribute of the <A> tag . Specifying its value as `lower' would mean that contents of

file 3.htm should open in the frame named `lower' on clicking the clickable sentence, as shown in Fig. 4

below.

E-COMMERCE IT430

Fig. 4

Code - 3.htm

<HTML>

<HEAD>

<TITLE>Horizontal Frames</TITLE>

</HEAD>

<BODY>

</BODY>

</HTML>

Ready-made names for frames

Target="_self" loads the new page into the same frame that contains the link Target="_top" - loads the

new page into the entire window Target="_blank" loads the new page into a new browser window

Some frame attributes

- NORESIZE used in the <frame> tag, prevents the surfers from changing the size of the frame

- SCROLLING this attribute determines whether a scroll bar appears with a frame (e.g,

Scrolling="yes" in the <frame> tag makes it appear)

- BORDER or FRAMEBORDER Set this attribute to 0 for not displaying a border between the

frames

Nesting frames

We can further divide a frame into different frames. This concept is called nesting of frames.

See the following example in this regard:

<HTML> <HEAD><TITLE>Nested

Frames</TITLE> </HEAD> <FRAMESET

ROWS="25%,75%"> <FRAME SRC="1.htm"

NAME="upper">

<FRAME

SRC="3.htm" NAME="right"> </FRAMESET>

</FRAMESET>

</HTML>

E-COMMERCE IT430

E-COMMERCE IT430

Result is shown in Fig. 5 below.

Fig. 5

Images can be links, too

We can make images clickable as shown in the following example:

<HTML> <HEAD><TITLE>Images Can Be Links, Too</TITLE> </HEAD> <BODY> Click this

house <A HREF="main.htm"><IMG SRC="home.gif"></A> to return to my home page. </BODY>

</HTML> Result of this code is shown in Fig. 6 below.

Fig. 6

Images can be maps, too

An image map is a web page graphics with several defined `clickable' areas. To create an image map perform

three steps:

1. Decide which distinct image regions you want to use and then determine the coordinates of each

region.

2. Use the <Map> and <Area> tags to assign a link to each of these regions.

3. Add a special version of the <IMG> tag to your web page.

Step 1: determine the map coordinates

A pixel is a point marked on computer screen. Typically computer screen arranges pixels in 800 columns by

600 rows. A pixel can be identified by giving its column no. followed by its row no. (e.g, pixel 10,15).

Suppose we want to make the following rectangular image (Fig. 7) as an image map. To know the

coordinates of its different clickable regions one way is to set up an HTML file with a link that uses the

following format: <A href="whatever"><Img src="imagename" ISMAP></A> Load this HTML file

into a browser and move the mouse pointer over the image. The image co-ordinates of the current mouse

position appear in the status bar. You can write these coordinates on a piece of paper.

199,0 599,0

0,0

399,0

E-COMMERCE IT430

199,99399,99599,99

Fig. 7

If the rectangular image is 600 pixels in width and 100 pixels in height, and you want to display it at the top

of the screen dividing it into three equally clickable areas, then you can find the coordinates of each region

as follows:

Area A defined by coordinate 0,0 in the upper-left corner and 199,99 in the lower-right corner Area B

defined by co-ordinate 199,0 in the upper-left corner and 399,99 in the lower-right corner Area C defined

by co-ordinate 399,0 in the upper-left corner and 599,99 in the lower-right corner

Step 1: Use <Map> to define the image map

<Map Name="Testmap"> <Area shape="Rect" coords="0,0,199,99" href="a.htm"> <Area

shape="Rect" coords="199,0,399,99" href="b.htm"> <Area shape="Rect" coords="399,0,599,99"

href="c.htm"> </Map> Note that we use area tag within the <Map> tag, and use `shape', `coords' and

`href' attributes of the area tag. `href' attribute specifies the file which would open on clicking the clickable

area.

Step 1: Add the image map to the web page

For adding the image map to the web page, use the image tag in the format shown below: <Img

src="coords.gif" usemap="#Testmap">

Note that you give name of the main image file as value of the `src' attribute. Name of the image map is

given as value of the `usemap' attribute.

<Area> tag's SHAPE attribute

the "shape" attributes also accepts the values "circle" and "poly" (for a polygon). For a circle, "coords"

attribute takes three values: the x-coordinate of the circle's centerpoint, the y-coordinate of the center point,

and the radius of the circle. For a polygon, the "coords" attribute takes three or more sets of coordinates.

Table of Contents: