Specs/HTML/2.2.0/Extensions/ImageMap

Changes since Specs/HTML/2.1.0/Extensions/ImageMap

• T251641: Use <span> instead of <figure-inline> for inline media.

The basic idea is to keep the same structure as what's expected for media in general, with the addition of the <map> element.

For example, this imagemap:

<imagemap>
File:Foobar.jpg
poly 10.1 10.9 10 30 -30 15 [[Main Page]]
</imagemap>

Renders as:

<span class="mw-default-size" typeof="mw:Image mw:Extension/imagemap" about="#mwt3" data-mw='{"name":"imagemap","attrs":{},"body":{"extsrc":"\nFile:Foobar.jpg\n\npoly 10.1 10.9 10 30 -30 15 [[Main Page]]\n"}}'>
    <span>
        <img resource="./File:Foobar.jpg" src="//example.com/images/3/3a/Foobar.jpg" data-file-width="1941" data-file-height="220" data-file-type="bitmap" height="220" width="1941" usemap="#ImageMap_02c94d3ca4bfc187"/>
    </span>
    <map name="ImageMap_02c94d3ca4bfc187">
        <area href="./Main_Page" shape="poly" coords="10,11,10,30,-30,15"/>
    </map>
</span>

If a caption is present, we get:

<imagemap>
File:Foobar.jpg|thumb|This is a test.
poly 10.1 10.9 10 30 -30 15 [[Main Page]]
default [[Other Page]]
</imagemap>

Rendered as:

<figure class="mw-default-size" typeof="mw:Image/Thumb mw:Extension/imagemap" about="#mwt3" data-mw='{"name":"imagemap","attrs":{},"body":{"extsrc":"\nFile:Foobar.jpg|thumb|This is a test.\npoly 10.1 10.9 10 30 -30 15 [[Main Page]]\ndefault [[Other Page]]\n"}}'>
    <a href="./Other_Page">
        <img resource="./File:Foobar.jpg" src="//example.com/images/3/3a/Foobar.jpg" data-file-width="1941" data-file-height="220" data-file-type="bitmap" height="220" width="1941" usemap="#ImageMap_a1a7270c874f787e"/>
    </a>
    <map name="ImageMap_a1a7270c874f787e">
        <area href="./Main_Page" shape="poly" coords="10,11,10,30,-30,15"/>
    </map>
    <figcaption>This is a test.</figcaption>
</figure>