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
 
(8 intermediate revisions by the same user not shown)
Line 1: Line 1:
<noinclude>
<noinclude>
This widget maps coordinates cleanly without breaking standard wiki variables.
Usage:
{{#widget:HtmlImageMap
|image=YourImageFileName.png
|width=960
|mapname=sandboxmap
|areas=rect 328,88,460,244 https://sandbox.umd.edu Electronics
}}
</noinclude>
</noinclude>
<includeonly>
<includeonly>
<!-- Dynamically grab your wiki image file path -->
<!-- Note the '#' added to usemap below so the browser can find the coordinate IDs -->
<img src="{{canonicalurl:Special:FilePath/{$image}}}" width="{$width|default:960}" usemap="#{$mapname|default:floorplan}" 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|default:floorplan}">
<map name="SandboxFloorplanMap">
<!-- We pull the data straight out of the plain text parameter -->
<area shape="rect" coords="245,38,365,148" href="https://sandbox.umd.edu/wiki/index.php/IRB_1246" title="Electronics">
<!-- Using custom inline elements prevents Smarty engine syntax leakage -->
<area shape="rect" coords="382,58,482,170" href="https://sandbox.umd.edu/wiki/index.php/IRB_1242" title="Crafting">
{$areas|validate:''}
<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"