Specs/HTML/2.1.0/Extensions/ImageMap
This documentation is for an old version. The latest version is available at Specs/HTML/Extensions/ImageMap. |
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:
<figure-inline 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>
</figure-inline>
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>