Merge pull request #102 from chasefleming/chasefleming/map-and-area

Add <map> and <area> elements

attrs/attrs.go

@@ -38,8 +38,9 @@ const (
 	Height = "height"
 	Width  = "width"
 	// Deprecated: Use Ismap instead
-	IsMap = "ismap"
-	Ismap = "ismap"
+	IsMap  = "ismap"
+	Ismap  = "ismap"
+	Usemap = "usemap"
 
 	// Semantic Text Attributes
 
@@ -90,6 +91,10 @@ const (
 
 	Open = "open"
 
+	// Area-Specific Attributes
+	Shape  = "shape"
+	Coords = "coords"
+
 	// Miscellaneous Attributes
 
 	DataPrefix = "data-" // Used for custom data attributes e.g., "data-custom"

elements.go

@@ -402,6 +402,18 @@ func Source(attrs attrs.Props, children ...Node) *Element {
 	return newElement("source", attrs, children...)
 }
 
+// ========== Image Map Elements ==========
+
+// Map creates a <map> element.
+func Map(attrs attrs.Props, children ...Node) *Element {
+	return newElement("map", attrs, children...)
+}
+
+// Area creates an <area> element.
+func Area(attrs attrs.Props) *Element {
+	return newElement("area", attrs)
+}
+
 // ========== Other ==========
 
 // None creates a NoneNode, representing a no-operation in rendering.

elements_test.go

@@ -523,6 +523,21 @@ func TestVideoWithSourceElementsAndFallbackText(t *testing.T) {
 	assert.Equal(t, expected, el.Render())
 }
 
+// ========== Image Map Elements ==========
+
+func TestMapAndArea(t *testing.T) {
+	expectedMap := `<map name="map-name"><area alt="Area 1" coords="34,44,270,350" href="#area1" shape="rect"></map>`
+	mapEl := Map(attrs.Props{attrs.Name: "map-name"},
+		Area(attrs.Props{
+			attrs.Href:   "#area1",
+			attrs.Alt:    "Area 1",
+			attrs.Shape:  "rect",
+			attrs.Coords: "34,44,270,350",
+		}),
+	)
+	assert.Equal(t, expectedMap, mapEl.Render())
+}
+
 // ========== Other ==========
 
 func TestNone(t *testing.T) {