|
|
HTML fundamentals
CHAPTER #
5
HTML Image
Techniques.
Image Maps
- Image maps are images
in which deferent regions of the image are linked to deferent URLs.
- When the user clicks the
image the image map process the coordinates of the point clicked,
to find out the URL of the that region linked to and go to the linked
page.
- Image maps are either
client-side or server-side.
Defining Client-side Image
map
<IMG
NAME = "MapName">
|
- The main image map
tag.
- It is a container
tag.
- Which defines NAME
attribute of the image map
|
<AREA
SHAPE="shape">
COORDS="coordinates"
HREF="URL"
|
- This tag defines
the shape and area of the clickable region of a particular link
in the image map.
- It also assigns
a URL value to the attribute HREF
|
</MAP>
|
- Closing tag of the
image map tag
|
<IMG SRC="imagemap.gif"
USEMAP="#MapName">
|
- This is an empty tag which defines the source of the image
file to be used for the image map.
- The "#" sign asks to look for the map with name "MapName"
in the same HTML file.
|
Values of AREA attribute
| SHAPE |
"rect"
Rectangular shape.
|
"circle"
Circular shape.
|
"polygon"
Shapes other than circle or rectangular.
|
| COORDS |
Coordinates
of diagonally opposite points
|
Coordinates
of center and value of radius.
|
All
end points which defines the polygon.
|
|
<AREA
SHAPE="rect"
COORDS=""x1,y1,x2,y2"
HREF="URL">
|
<AREA
SHAPE="circle"
COORDS=""x1,y1,radius"
HREF="URL">
|
<AREA
SHAPE="poly"
COORDS=""x1,y1,x2,y2....xn,yn"
HREF="URL">
|
Other Image techniques
| Image
Transparency |
Image
Interlacing |
Animated
GIFs |
- Image that supports
transparency contains elements that automatically blends withe
background of the HTML page.
- Used to make the
image background transparent so that it appears as an integral
part of the page.
- GIF89a and PNG supports
image transparency.
|
- Used to display
the image progressively.
- Technique used to
make the page more accessible with slower Internet connections.
- An Interlaced image
will appear to "fade in"as it renders to in the browser.
- GIF( both 87a &
89a) and PNG support Interlacing
|
- Animated GIF contains
more than one GIF images displayed in a sequence.
- Only GIF 89a supports
animation.
|
|
