BitWithBite
HTML Worksheet
🌐 HTML Image Maps
SCORE___ / 20
NameClassDate
After this worksheet you can
Create clickable regions on one imageUse map and areaDefine rect/circle/poly shapesKnow when maps are appropriate📚 Quick Recap
An image map lets you define clickable regions on a single image — different areas link to different destinations. Think of a world map where clicking each country goes to a different page. They're created using the <map> element with <area> children, and linked to an image via the usemap attribute.
🧠 Section A · Concept Check ● BEGINNER 4 × 1 = 4
1An image map uses img + :
2img connects to its map via:
3area shape options include:
4coords for a circle are:
🧮 Section B · Problem Solving ● INTERMEDIATE 2 + 3×3 = 11
5<img usemap="#"> references the map name.
6Each clickable region is an <> tag.
7Sketch an image map with one rectangular clickable region.
8When is an image map useful?
9Why are image maps rare today?
🚀 Section C · Challenge ● CHALLENGE 5
10What does shape=poly allow?
💭 Reflection — the most useful thing I learned:
A ___/4 B ___/11 C ___/5 Total ___/20
Teacher's Signature
Parent's Signature
✂ answer key — fold or cut before handing out
1-A 2-A 3-A 4-A | 5 mapname 6 area 7 = <map name="m"><area shape="rect" coords="0,0,100,50" href="a.html" alt="A"></map> 8 = Diagrams/maps where regions link to different pages 9 = Not responsive by default; CSS/SVG alternatives are better | 10 = Any polygon via multiple coordinate pairs