1. CS 200 Image Maps

2. Goal for Image Map Divide one image into several regions Each region links to a different place

3. Use of Image Maps Navigation for schematics, floor plans, blue prints, diagrams, and flowcharts Store locators City, county, and country maps Blog and web site headers, sitemaps, navigational bars Layouts with myspace, facebook, and other social media Example: http://www.rei.com/map/storehttp://www.rei.com/map/store

4. Code <area shape=“rect” coords=“120,20,180,56” href=“http://... “ /> Clickable region #1 Clickable region #2 Clickable region #3

5. Why have name attribute? Could have more than one map <area shape=“rect” coords=“120,20,180,56” href=“http://... “ /> Example of a second map

6. What are Coordinates? 218, 40

7. Help Writing Code Gimp – one of many programs to do this Filters  Web  Image Map

8. New Dialog (Window) 3 selection tools: rectangle circle polygon

9. Draw around the region You may need to double-click at end

10. Fill in URL for link

11. View Source

12. Copy to Web Page (Kompozer or Notepad) Recommend changing name of the map Make up a new name

13. Schedule Do Lab 06 (Image Map) - due Thursday midnight Individual Designs (Lab 07) Quiz 4: Image Maps Start Multimedia & Design (Lab 08)