How to create Hot Spots for Web Images By Randa and Sunha

1
How to create Hot Spots for Web ImagesBy Randa
and Sunha

• Image map is a web image with hot spots over it
  which allows us to create different links to
  different places for the same image. However in a
  web browser hot spots will not be visible but the
  links will still work
• Two types
• Add a graphical hot spot to a graphic
• Add a text hot spot to a graphic

2
Add a graphical hot spot to a graphic

• Click the graphic.
• On the Pictures toolbar, click the Hotspot button
  corresponding to the shape you want Note   To
  display the Pictures toolbar, point to Toolbars
  on the View menu, and then click Pictures.
• Rectangular Hotspot
• Circular Hotspot
• Polygon Hotspot

3

• On the graphic, draw a rectangle, circle, or
  polygon, depending on the shape you chose while
  holding down the mouse button. When you release
  the mouse button, the Insert Hyperlink dialog box
  opens.
• Note   To draw a polygon, click where you want
  the first corner of the polygon to be, click to
  place each corner of the polygon, and then
  double-click to finish it.
• Example Graphical Hotspot and click on it

4
Add a text hot spot to a graphic

• Specify the destination for the hot spot
  then choose one of the following
• The destination is in a local folder or web site
• Create a new web page and set it as the
  destination
• The destination is on the World Wide Web
• Create an e-mail message when a site visitor
  clicks the graphic
• The destination is a bookmark
• Example Test hotspot

5

• The destination is in a local folder or web site
• Under Link to, click Existing File or Web Page.
• Select the page or file where you want the hot
  spot to link.
• Example click on head of boy

6

• Create a new web page and set it as the
  destination
• Under Link to, click Create New Document.
• Type the name of the new document. If you want to
  change the path of the new document, click
  Change.
• Under When to edit, specify whether you want to
  edit the new document now or later.
• Example click on blond hair of the girl

7

• The destination is on the World Wide Web
• Under Link to, make sure that Existing File or
  Web Page is selected.
• Click Browse the Web .
• In your Web browser, browse to the page that you
  want to link to, and then press ALTTAB to switch
  back to Microsoft FrontPage. The location of the
  page you visited is displayed in the Address box.
• Example click on left foot of the girl

8

• Create an e-mail message when a site visitor
  clicks the graphic
• Under Link to, click E-mail Address.
• Either type the e-mail address you want in the
  E-mail address box, or select an e-mail address
  in the Recently used e-mail addresses box.
• In the Subject box, type the subject of the
  e-mail message.
• Note   Some Web browsers and e-mail programs may
  not recognize the subject line.
• Example click on brown hair of the girl

9

• The destination is a bookmark
• Navigate to the page that contains the bookmark,
  select it, and then click Bookmark.
• In the Select Place in Document box, click the
  bookmark you want to use as the destination, and
  then click OK.
• Click OK again to insert the hyperlink.
• Example click on flower next to the girls feet.
  The link underneath will indicate children