CS 200 Image Maps

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

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:

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

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

What are Coordinates? 218, 40

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

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

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

Fill in URL for link

View Source

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

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