CSCE 102 General Application Programming Section 1,2,3

1
CSCE 102 General Application ProgrammingSection
1,2,3

• Instructor Jin Jin
• jinj_at_cse.sc.edu

2
Making Images into Links

• Simple image links
• lta href URLgtltimg srcimage1.gif
  altdescription /gtlt/agt
• Thumbnail Image
• What does it look like?
• How to resize the image?
• All programs-gtAccessories-gtPaint -gtOpen
  image-gtStretch
• lta hrefimage.jpggtltimg srcimage_resized.jpg
  altdescription /gtlt/agt
• Insert resized images in tables

3
Making Images into Links Contd

• Image Maps--An image has many clickable parts.
• First, find an image
• Second, get the coordinates of a certain shape of
  image.
• Third, three shapes rect, circle and polygon
• Rect you'll need two different co-ordinates.
  Top left and bottom right. X1,y1, x2, y2
• Circle x, y, r
• Polygon This one uses the co-ordinates of the
  points in order. So if you're going to have a
  pentagon (shape with five sides), then you list
  all five co-ordinates but make sure they're
  listed in ORDER. One after the other, otherwise
  you'll confuse some browsers. X1,y1,x2,y2,x3,y3,x4
  ,y4,etc.

4
Image Maps contd

• Step one Define the map and its link areas, we
  use ltmapgt and ltarea /gt tag.
• ltmap idmyFirstMap namemyFirstMapgt
• ltarea shaperect coordsx1,y1,x2,y2
  hrefsomeURL /gt
• ltarea shapecircle coordsx,y,r
• hrefanotherURL /gt
• ltarea shapepolygon coordsx1,y1,x2,y2,x3,
  y3,x4,y4,x5,y5
• hrefanotherURL /gt
• lt/mapgt
• Note 1)need to have id and name at the same time
• 2)area is also an empty tag

5
Image Maps contd

• Step two Lay an image over the defined area
• ltimg srcmapimage.gif altdescription
  usemapmyFirstMap /gt
• Note the value of usemap is the same as the
  value of id and name in map tag.