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
A
B
C
E-COMMERCE – IT430 VU
© Copyright Virtual University of Pakistan 36
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"
"Kaha suna maaf kar dijee ga"
"ALLAH App ka bhala karee" (ameen)
You received this message because you are subscribed to the Google Groups "Virtual University of Pakistan" group.
To post to this group, send email to discussion_vu@googlegroups.com.
To unsubscribe from this group, send email to discussion_vu+unsubscribe@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/discussion_vu?hl=en.
No comments:
Post a Comment