An image map is an image that has been divided into regions called hotspots; when a user clicks a hotspot, an action occurs (for example, a new file opens).

 

California Visual Arts Standards

  • 2.3 Develop and refine skill in the manipulation of digital imagery (either still or video).
  • 2.5 Create an expressive composition, focusing on dominance and subordination.

National Educational Technology Standards

  1. Creativity and Innovation: Students demonstrate creative thinking, construct knowledge, and develop innovative products and processes using technology.

 

Creating an Image Map

  1. Create a new html document
  2. Insert an image into a html page using Dreamweaver, now select the image.
  3. Type a name in the Map text box in the Property Inspector.
  4. For each hotspot, click a hotspot tool in the Property Inspector, and then drag over the image to create the hotspot.
  5. Type alternate text in the Alt text box in the Property Inspector for each hotspot.
  6. Using the map provided (link) add hot spots for the following stores:
  • Nordstrom: ( http://store.nordstrom.com/ )
  • Macy's: ( http://www1.macys.com/ )
  • Bloomingdale's: ( http://www1.bloomingdales.com/ )
  • Neiman Marcus: ( http://www.neimanmarcus.com/ )
  • Andronico's Market: ( http://www.andronicos.com/ )
  • Crate and Barrel: ( http://www.crateandbarrel.com/ )
  • Sigonas: ( http://www.sigonas.com/ )
*** As an opportunity for some bonus points, you may create a second imagemap. In the past students have used images of the cast from a favorite tv show, a map of disneyland, theme park, a frog dissection...there are many possibilities, use your imagination. If you choose to do this, insert the image below your first map (Stanford shopping center).

Imagemap

imagemap stanford map sigonas bloomingdales