Image Map

1
Image Map Javascript

• Aizhong Lin

2
Outline

• Image map

3
Javascript --- Make a basic page

• A basic page
• lthtmlgtltheadgtlttitlegtImage Rolloverlt/titlegtlt/head
  gtltbody bgcolor"white"gtltimg
  srcimages/screw.jpg"gtlt/bodygtlt/htmlgt
• Run the page
• http//linus.it.uts.edu.au/alin/alan/teaching/pot
  i/e01.html

4
Javascript --- Naming The Image

• Name the image
• lthtmlgtltheadgtlttitlegtImage Rolloverlt/titlegtlt/head
  gtltbody bgcolor"white"gtltimg namepic1
  srcimages/screw.jpggtlt/bodygtlt/htmlgt
• Run the page
• http//linus.it.uts.edu.au/alin/alan/teaching/pot
  i/e02.html

5
Javascript --- Naming The Image

• Name the image
• lthtmlgtltheadgtlttitlegtImage Rolloverlt/titlegtlt/head
  gtltbody bgcolor"white"gtltimg namepic1
  srcimages/screw.jpggtlt/bodygtlt/htmlgt
• Run the page
• http//linus.it.uts.edu.au/alin/alan/teaching/pot
  i/e02.html

6
Javascript --- "In-Tag" Image Rollovers

• "In-Tag" Image Rollovers
• lthtmlgtltheadgtlttitlegtImage Rolloverlt/titlegtlt/hea
  dgtltbody bgcolor"white"gtlta href"javascript//
  "onMouseOver"document.images.pic1.srcimages/ca
  pnut.jpg'"onMouseOut"document.images.pic1.srci
  mages/screw.jpg'"gt ltimg src"screw.jpg"
  name"pic1" border0gtlt/agt
• lt/bodygtlt/htmlgt
• Run the page
• http//linus.it.uts.edu.au/alin/alan/teaching/pot
  i/e02.html

7
Javascript --- Making The Event

• Making The Event
• lthtmlgtltheadgtlttitlegtImage Rolloverlt/titlegtlt/head
  gtltbody bgcolor"white"gtlta href"javascript//"
  onMouseOver"roll_this()"gtltimg src"screw.jpg"
  name"pic1" border0gtlt/agt lt/bodygtlt/htmlgt
• Run the page
• http//linus.it.uts.edu.au/alin/alan/teaching/pot
  i/e03.html

8
Javascript --- Making The Rollover

• Making The Rollover
• lthtmlgtltheadgtlttitlegtImage Rolloverlt/titlegtltscrip
  t language"JavaScript"gtfunction roll_this()
• document.images.pic1.srcimages/capnut.jpg"
  lt/scriptgt
• lt/headgt
• ltbody bgcolor"white"gtlta href"javascript//"
  onMouseOver"roll_this()"gtltimg src"screw.jpg"
  name"pic1" border0gtlt/agt lt/bodygtlt/htmlgt
• Run the page
• http//linus.it.uts.edu.au/alin/alan/teaching/pot
  i/e04.html