Widget:HtmlImageMap: Difference between revisions

From sandbox
Jump to navigation Jump to search
← Older edit
Gfc (talk | contribs)
Bureaucrats, sandbox-editors, Administrators, Widget editors
2,219 edits
No edit summary
Gfc (talk | contribs)
Bureaucrats, sandbox-editors, Administrators, Widget editors
2,219 edits
No edit summary
 
(9 intermediate revisions by the same user not shown)
Line 1: Line 1:
<noinclude>
<noinclude>
This widget allows you to create an image map by pasting raw HTML area coordinates.
Usage:
{{#widget:HtmlImageMap
|image=YourImageFileName.png
|width=800
|mapname=sandboxmap
|areas=
<area shape="rect" coords="300,80,450,220" href="https://example.com" title="Electronics">
<area shape="rect" coords="480,110,580,240" href="https://example.com" title="Crafting">
}}
</noinclude>
</noinclude>
<includeonly>
<includeonly>
<!-- Automatically resolves the full path of your wiki file -->
<!-- Note the '#' added to usemap below so the browser can find the coordinate IDs -->
<img src="{{canonicalurl:Special:FilePath/{$image}}}" width="{$width|escape:'html'}" usemap="#{$mapname|escape:'html'}" alt="Makerspace Map">
<img src="https://sandbox.umd.edu/wiki/images/thumb/f/f9/SandboxFloorPlan-Studios.jpg/800px-SandboxFloorPlan-Studios.jpg" width="800" usemap="#SandboxFloorplanMap" alt="Makerspace Map">


<map name="{$mapname|escape:'html'}">
<map name="SandboxFloorplanMap">
   {$areas}
<area shape="rect" coords="245,38,365,148" href="https://sandbox.umd.edu/wiki/index.php/IRB_1246" title="Electronics">
<area shape="rect" coords="382,58,482,170" href="https://sandbox.umd.edu/wiki/index.php/IRB_1242" title="Crafting">
<area shape="rect" coords="472,72,572,180" href="https://sandbox.umd.edu/wiki/index.php/IRB_1238" title="Sewing">
<area shape="rect" coords="265,295,365,385" href="https://sandbox.umd.edu/wiki/index.php/IRB_1223" title="Prototyping Laser Cutting">
   <area shape="rect" coords="360,282,450,382" href="https://sandbox.umd.edu/wiki/index.php/IRB_1223" title="Prototyping 3D Printing">
  <area shape="rect" coords="330,440,430,545" href="https://sandbox.umd.edu/wiki/index.php/IRB_1222" title="CNC">
  <area shape="rect" coords="533,436,719,493" href="https://sandbox.umd.edu/wiki/index.php/IRB_1231" title="Digital Media Tools">
  <area shape="rect" coords="436,311,523,510"
        href="https://sandbox.umd.edu/wiki/index.php/IRB_1224"
        title="Woodworking Studio"
  >
</map>
</map>
</includeonly>
</includeonly>

Latest revision as of 00:08, 14 October 2026


Retrieved from "https://sandbox.umd.edu/wiki/index.php?title=Widget:HtmlImageMap&oldid=3375"