Images are pretty straightforward. You create images by using the self-closing
<img /> tag. There are two important attributes you need to supply.
: src stands for source and needs a URL pointing to an image file. This can be a relative link to a file on your own server, or a link to an image on another website.
: the alt text is displayed when the image can’t be loaded. When the link to the image is broken, or somebody uses a screen reader, the alt text will tell them what should have been there.
<img src="somefile.jpg" alt="This is some file" />
The most common image format on the web is .jpg or .png (with transparency), and .gif for animated images. They are known for their small file size and therefore quick loading times. But, HTML supports nearly all image formats, so anything goes really.
Always specify the size (width and height) of (large) images with CSS. If you don’t, the page will change layout all the time while the image is loading, because it is adjusting to the current image dimensions in real time.
If you want to define certain special (clickable) areas on an image, you need to use image maps.
<map> tag introduces a set of areas to be mapped, which are defined with the
<area /> tag.
Linking an image with its map is done by giving your img tag the attribute
, and your map tag the attribute
(just like with local anchor points).
Defining your areas is done by using one of these three attribute pairs (for a rectangle, circle or polygon, respectively):
shape=”rect” coords=”x1,y1,x2,y2” shape=”circle” coords=”x,y,radius” shape=”poly” coords=”x1,y1,….,xn,yn”
And lastly, an
href attribute is provided to define what the area links to.
<img src="somefile.png" alt="This is an image" usemap="#imagemap"> <map name="imagemap"> <area shape="rect" coords="0,0,100,100" href="somepage.html" alt="Links to some page"> <area shape="circle" coords="0,0,50" href="anotherpage.html" alt="Links to another page"> </map>