Image tag and attributes
<img src = “[Link]”>
<img src = “C:\Users\Public\Pictures\Sample Pictures\”[Link]”>
Attributes:
Height Vspace
Width Border
Alt Align
Hspace
vertically and horizontally align images
Use the align and valign attributes to place images within your body, tables, or sections.
1. align (Horizontal)
o right
o left
o center
2. valign (Vertical)
o top
o bottom
o center
<img src="[Link]" align="left" width="60" height="85" border="0" hspace="20" vspace = “20”
alt="cross">
<A HREF="[Link]"><IMG SRC="[Link]" WIDTH="40" HEIGHT="40" HSPACE="10"
ALIGN="MIDDLE" ALT="home">
<IMG STYLE="border: none;" SRC="[Link]" ALT="Home">
<img src="logo_w3s.gif" alt="[Link]" style="border: 5px yellow" width="100" height="100" />
<img src="[Link]" alt="[Link]" style="border: 5px solid #f6aabb" width="400" height="400"
/>
<h4>Image floated to the right</h4>
<p><img src="[Link]" alt="[Link]" width="100" height="100" style="float: right"
style ="margin:40px 60px"/>This is some text. This is some text. This is some text.</p>
<h4>Image floated to the right</h4>
<p><img src="[Link]" alt="[Link]" width="100" height="100" style="float:right"
style ="margin:40px 60px" style="border: 5px solid #f6aabb" />This is some text. This is some text. This
is some text.</p>
PLACING THUMB-NAIL IMAGES ON A WEB PAGE
<H4 ALIGN="CENTER"><A HREF="[Link]"><IMG SRC="[Link]" WIDTH="40" HEIGHT="40"
HSPACE="10" ALIGN="MIDDLE" ALT="home"></A>Click on the button to head home</H4><HR>
Create an Image Map
-Insert image name which you want to use as a image map([Link])
-Give link of any web page or image u want to open on particular image
-Hot Spot
Now that you've got your image and co-ordinates, HTML comes to finalise your job. There
are three different shapes (commonly termed "hot spots") that can be used in image maps.
They are as follows:
-RECT
-CIRCLE
-POLYGON
Rectangle
This expects four coordinates. The horizontal position of the top-left corner, the vertical
position (from the top of the image) of the top-left corner, the horizontal position of the
bottom-right corner and the vertical position of the bottom-right corner. An example would be:
shape="rect" coords="10,20,75,40"
Circle
This expects three coordinates. The horizontal position of the centre, the vertical position of
the centre and the radius of the circle (percentage radii are taken as a percentage of the
shorter side of the image). An example would be:
shape="circle" coords="50,80,20"
Polygon
This expects as many pairs of coordinates as you need to make your polygon. These can
make any polygon shapes you need, and can have sloping lines. All coordinates are
specified as horizontal position then vertical position, with all of them in a long comma
separated list. The last pair of coordinates can optionally match the first. An example would
be:
shape="poly"
coords="217,305,218,306,218,306,228,316,243,316,243,325,229,325,229,322,217,310"
shape Defines a shape for the clickable area. Possible values:
default
rect
circle
poly
coords Specifies the coordinates of the clickable area. Coordinates are specified as
follows:
rect: left, top, right, bottom
circle: center-x, center-y, radius
poly: x1, y1, x2, y2, ...
Code
<img src="[Link]" usemap="#green" border="0" height = "200" width = 300>
<map name="green">
<area shape="polygon" coords="19,44,45,11,87,37,82,76,49,98" href="[Link]">
<area shape="rect" coords="128,132,241,179" href=""[Link]
<area shape="circle" coords="68,211,35" href="[Link]">
</map>
