Scribd
Upload
61 views

Vertically and Horizontally Align Images: Image Tag and Attributes

The document discusses image tags and attributes in HTML. It describes common image attributes like src, height, width, and alt. It also covers how to align images using the align and valign attributes. The document provides examples of using different image attributes and styles. It then covers how to create image maps using the map and area tags along with shape and coords attributes to define clickable areas linked to other pages. Rectangle, circle, and polygon shapes are described for use in image maps.

Uploaded by

nnouman
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
61 views

Vertically and Horizontally Align Images: Image Tag and Attributes

The document discusses image tags and attributes in HTML. It describes common image attributes like src, height, width, and alt. It also covers how to align images using the align and valign attributes. The document provides examples of using different image attributes and styles. It then covers how to create image maps using the map and area tags along with shape and coords attributes to define clickable areas linked to other pages. Rectangle, circle, and polygon shapes are described for use in image maps.

Uploaded by

nnouman
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 3

Image tag and attributes

<img src = “deser.jpg”>

<img src = “C:\Users\Public\Pictures\Sample Pictures\”Desert.jpg”>

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="cross1.gif" align="left" width="60" height="85" border="0" hspace="20" vspace = “20”


alt="cross">

<A HREF="index.htm"><IMG SRC="back.gif" WIDTH="40" HEIGHT="40" HSPACE="10"


ALIGN="MIDDLE" ALT="home">
<IMG STYLE="border: none;" SRC="homepage.gif" ALT="Home">

<img src="logo_w3s.gif" alt="W3Schools.com" style="border: 5px yellow" width="100" height="100" />

<img src="Koala.jpg" alt="W3Schools.com" style="border: 5px solid #f6aabb" width="400" height="400"


/>

<h4>Image floated to the right</h4>


<p><img src="Koala.jpg" alt="W3Schools.com" 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="Koala.jpg" alt="W3Schools.com" 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="Desert.jpg"><IMG SRC="Desert.jpg" 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(Desert.jpg)
-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="Desert.jpg" 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="Koala.html">


<area shape="rect" coords="128,132,241,179" href=""http://www.trees.com/furniture.html"">
<area shape="circle" coords="68,211,35" href="Koala.html">

</map>

You might also like