Banner Image Map

ADVANCED IMAGE TECHNIQUES

Quick Reference

In General

Image Formats

Cross-Platform Considerations

Image tag options

Creating and using background images

Imagemaps: A webpage graphic with defined "hotspots" which, when clicked on, serve as links to other webpages.

  1. Using GraphicConverter (Mac), PaintShop Pro (Win), PhotoShop (Mac/Win), or another graphics program create an image which will have "hotspots" and serve as an image map for your website. You can export an image created with Inspiration to create an attractive sitemap (Example).
  2. Key: make it clear where people can click to make something happen!
  3. Insert the image into your webpage that you want to make into an imagemap.

Creating an Imagemap

(use this sample)
Claris Homepage
Netscape Composer
MS Frontpage 2000
  1. Double click on it. In the pop-up window, click on the "Behavior" tab at the top:
  2. Click on the "Image map" radio button and click on "Edit."
  3. Select the rectangular or circular link tool:
  4. Click and drag on your image map to draw rectangles or circles to define "hotspots." Click on the link editor to create relative or absolute links.
  5. Close the window. You're done!
  6. Choose to preview the webpage in your browser and test the hotspot links.

  1. From the PICTURES TOOLBAR (probably at the bottom of the screen), click on either the rectangular or circular hotspot tool: .
  2. The polygonal hotspot tool can be used to create irregularly shaped closed figures to be used as hotspots:
  3. Use the pencil (your cursur) to click and drag, creating a box or circle over the part of the image you want to make a linkable hotspot:
  4. After defining the hotspot, use the CREATE HYPERLINK dialog window to specify either an absolute link or relative link to a webpage you have already created and saved.
  5. Click OK to save the link. You're done!
  6. Choose to preview the webpage in your browser and test the hotspot links.

Animated Graphics

Considerations when designing for TV (from MacWorld Dec 96 p. 173)

Other Cool Tricks

Targets/Anchors | Tables | Images | Multimedia | Javascript Rollover Images | Frames | PDFs | HyperStudio: | Guestbook | Uploading

http://www.wtvi.com/html

  Back - Forward

Home - Basic Course - Intermediate Course - Tools for the TEKS


Made on a Mac!Built by Claris HomePageCourse and Website by Wesley A. Fryer of Lubbock, Texas.
Site sponsored by WesTech Vision Inc.