Improving image maps with SVG and XSLT

In this article Frederik Elwert shows us how to create a cross-browser solution to enhance image maps involving XSLT and SVG. The map is made a lot more interactive and usable, and accessibility is also improved.

( Read the article )

Tabbing is a trip in Opera.

Originally posted by Coyotee:

Tabbing is a trip in Opera.

Right, we also discussed this issue. Opera highlights both when tabbing, the image map areas and the SVG shapes. So one possibility would be to drop the image map when creating the SVG with the XSLT stylesheet. But since Firefox doesn’t highlight the SVG shapes when tabbing, one would loose this visual feedback. That’s why we decided to better keep the redundancy of tabbing through the map twice instead of leaving some users without any visual feedback.

Originally posted by DesertDawg:

I have been very curious as to how you created the SVG polylines around the different countries? It is no easy task.

The SVG shapes are generated from the imagemap <area> data. You’ll find the according template in the XSLT stylesheet. In fact, the polygons are the easiest task: You can simply use the area’s coords attribute value for the points attribute in the SVG polygon. circles and rects require some more effort.

For the technical details, see the following template:

  <xsl:template mode="shape" match="html:area">
    <xsl:param name="id"/>
    <xsl:choose>
      <!-- Rectangle -->
      <xsl:when test="@shape = 'rect'">
        <rect id="{$id}" class="area">
          <xsl:variable name="x1" select="substring-before(@coords,',')"/>
          <xsl:variable name="y1" select="substring-before(substring-after(@coords,','),',')"/>
          <xsl:variable name="x2" select="substring-before(substring-after(substring-after(@coords,','),','),',')"/>
          <xsl:variable name="y2" select="substring-after(substring-after(substring-after(@coords,','),','),',')"/>
          <xsl:attribute name="x"><xsl:value-of select="$x1"/></xsl:attribute>
          <xsl:attribute name="y"><xsl:value-of select="$y1"/></xsl:attribute>
          <xsl:attribute name="width"><xsl:value-of select="$x2 -$x1"/></xsl:attribute>
          <xsl:attribute name="height"><xsl:value-of select="$y2 -$y1"/></xsl:attribute>
        </rect>
      </xsl:when>
      <!-- Circle -->
      <xsl:when test="@shape = 'circle'">
        <circle id="{$id}" class="area">
          <xsl:attribute name="cx">
            <xsl:value-of select="substring-before(@coords,',')"/>
          </xsl:attribute>
          <xsl:attribute name="cy">
            <xsl:value-of select="substring-before(substring-after(@coords,','),',')"/>
          </xsl:attribute>
          <xsl:attribute name="r">
            <xsl:value-of select="substring-after(substring-after(@coords,','),',')"/>
          </xsl:attribute>
        </circle>
      </xsl:when>
      <!-- Polygon -->
      <xsl:otherwise>
        <polygon id="{$id}" class="area" points="{@coords}">
        </polygon>
      </xsl:otherwise>
    </xsl:choose>
  </xsl:template>