Widget:HtmlImageMap: Difference between revisions

From sandbox
Jump to navigation Jump to search
Gfc (talk | contribs)
Bureaucrats, sandbox-editors, Administrators, Widget editors
2,219 edits
Created page with "<noinclude> This widget allows you to create a clickable image map using raw HTML. Usage: {{#widget:HtmlImageMap |image=Name_of_image.jpg |width=500 |alt=Description |mapname=mymap |coords1=0,0,100,100 |link1=https://yourwiki.com |title1=Page 1 }} </noinclude> <includeonly> <!-- HTML Image Map Structure --> <img src="{$image|escape:'url'}" width="{$width|escape:'html'}" alt="{$alt|escape:'html'}" usemap="#{$mapname|escape:'html'}"> <map name="{$mapname|escape:'html'}">..."
 
Gfc (talk | contribs)
Bureaucrats, sandbox-editors, Administrators, Widget editors
2,219 edits
No edit summary
 
(11 intermediate revisions by the same user not shown)
Line 1: Line 1:
<noinclude>
<noinclude>
This widget allows you to create a clickable image map using raw HTML.
Usage:
{{#widget:HtmlImageMap
|image=Name_of_image.jpg
|width=500
|alt=Description
|mapname=mymap
|coords1=0,0,100,100
|link1=https://yourwiki.com
|title1=Page 1
}}
</noinclude>
</noinclude>
<includeonly>
<includeonly>
<!-- HTML Image Map Structure -->
<!-- Note the '#' added to usemap below so the browser can find the coordinate IDs -->
<img src="{$image|escape:'url'}" width="{$width|escape:'html'}" alt="{$alt|escape:'html'}" usemap="#{$mapname|escape:'html'}">
<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">
  <!-- Area 1 (Rectangle) -->
<area shape="rect" coords="245,38,365,148" href="https://sandbox.umd.edu/wiki/index.php/IRB_1246" title="Electronics">
  {if isset($coords1) && isset($link1)}
<area shape="rect" coords="382,58,482,170" href="https://sandbox.umd.edu/wiki/index.php/IRB_1242" title="Crafting">
    <area shape="rect" coords="{$coords1|escape:'html'}" href="{$link1|escape:'html'}" alt="{$title1|escape:'html'}" title="{$title1|escape:'html'}">
<area shape="rect" coords="472,72,572,180" href="https://sandbox.umd.edu/wiki/index.php/IRB_1238" title="Sewing">
   {if}
<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 2 (Circle) -->
   <area shape="rect" coords="330,440,430,545" href="https://sandbox.umd.edu/wiki/index.php/IRB_1222" title="CNC">
   {if isset($coords2) && isset($link2)}
   <area shape="rect" coords="533,436,719,493" href="https://sandbox.umd.edu/wiki/index.php/IRB_1231" title="Digital Media Tools">
    <area shape="circle" coords="{$coords2|escape:'html'}" href="{$link2|escape:'html'}" alt="{$title2|escape:'html'}" title="{$title2|escape:'html'}">
  <area shape="rect" coords="436,311,523,510"
   {if}
        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"