Lesson n°6: Dressing and  maping a picture
 
 
Dressing a picture :

It is possible, to have the text all around the picture. Use the attribute align (left, right, center, texttop, abscenter, absbottom)

Script used for this picture :< img src = " strasbourg.gif " align = " left " >


To map a picture :

This allows to select zones of an picture which will be able to be active by hypertext link
 
 

example:click on two towers, and bottom of the left tower
 
 

Here is script:

< img usemap = " thomas " SRC = " stthomas.jpg " height=480 width=640 border= "0" >

< map name = " thomas " >
< area shape = " circle " alt = "table" coords = "180,100,100" href = " lecon_5.html " >
< area shape = " rect " alt = " hypertext " coords = "350,150,600,400" href = " lecon_2.html " >
< area shape = " polygon " alt = "tags" coords = "245,230,150,300,150,480,310,480,310,320" href = " lecon_1.html " >
< / map >
< / body >
 
 

Attributes of the tag img

usemap the name and the address of the used map
border = "0" avoids having a frame around the photo
height=480 width=640 size of the picture in pixel

 
 
 

Tags to map and the attributes

< map name = " thomas " > < / map > frames(supervises) information concerning the " map " ( card)
name = " thomas " name of the " map "
area shape = " circle " (rect or polygon) shape of the selection
coords = "180,100,100" coordinated with the selection in pixels
  • circle: corrds = " has, b, c "
  • circle: a and b = the place of the centre of the circle, 
  • a =distance of the centre of the circle from the left of the picture 
  • b = distance of the centre of the circle from the top of the picture 
  • c = diameter of the circle
  • rect: coords = " has, b, c, d "
  • a = distance of highly-rated (vertical) left-handler from the left of the image 
  • b = distance of highly-rated height (horizontal) from the height of the image 
  • c = distance of highly-rated right(straight) (vertical) from the left of the image 
  • d = distance of highly-rated low (horizontal) from the height of the image
  • polygon: coods = " has, b, c, d, e, f "
  • a, b = coordinates of the first angle of the polygone, a = horizontal coordinated, b = vertical coordinated 
  • c, d = coordinates of the second angle 
  • e, f ..........
alt = "table" cone indicating "table" to see above (works only with MS Explorer).
href = " lecon_5.html " Hypertext link

contents