Difference between revisions of "Template:ImageMap"
Jump to navigation
Jump to search
old>Realpsojed (There is a 3px padding when using thumb param VS when using without thumb. Added another div of width = {{{1}}} when using thumb. This ensures that pixel-positioning of absolute divs stays on top of the images even if you switch between thumb and non-thumb version.) |
m (3 revisions imported) |
||
| (One intermediate revision by one other user not shown) | |||
| Line 3: | Line 3: | ||
|center=<div class{{=}}"center"><div class{{=}}"thumb tnone"> | |center=<div class{{=}}"center"><div class{{=}}"thumb tnone"> | ||
|<div class{{=}}"thumb tnone"> | |<div class{{=}}"thumb tnone"> | ||
}}<div class="thumbinner" style="display:inline-block;position:relative"><div style="width:{{{1}}}">|<div style="display:inline-block;position:relative">}}{{{areas|{{{3|}}}}}}[[File:{{{file|{{{2}}}}}}|{{{size|{{{1}}}}}}{{#if:{{{caption|}}}|{{!}}{{{caption}}}}}|link=]]{{#if:{{{thumb|}}}|</div>}}{{#if:{{{thumb|}}}|<div class="thumbcaption"><div class="magnify">[[:File:{{{2}}}|<div class="Internal"></div>]]</div>{{{caption|}}}</div></div></div>{{#ifeq:{{{thumb}}}|center|</div>}}}}</div></includeonly><noinclude>{{doc}} | }}<div class="thumbinner" style="display:inline-block;position:relative"><div style="width:{{{1}}};margin:auto;position:relative;">|<div style="display:inline-block;position:relative">}}{{{areas|{{{3|}}}}}}[[File:{{{file|{{{2}}}}}}|{{{size|{{{1}}}}}}{{#if:{{{caption|}}}|{{!}}{{{caption}}}}}|link=]]{{#if:{{{thumb|}}}|</div>}}{{#if:{{{thumb|}}}|<div class="thumbcaption"><div class="magnify">[[:File:{{{2}}}|<div class="Internal"></div>]]</div>{{{caption|}}}</div></div></div>{{#ifeq:{{{thumb}}}|center|</div>}}}}</div></includeonly><noinclude>{{doc}} | ||
[[Category:Templates]]</noinclude> | [[Category:Templates]]</noinclude> | ||
Latest revision as of 21:17, 21 November 2021
This template partially replicates the function of the imagemap plugin, but only uses mediawiki templates instead of html image tag. This template creates the main body using the size and image provided and adds the formatting, while Template:MapArea is used for individual areas of the image to produce clickable links that also display tooltips on hover (unlike the plugin where this doesn't work).
Example usage from Swords (skill tree)
{{ImageMap|338px|Swords_skilltree.png|
{{MapArea|Blade Maintenance|39|63|62}}
{{MapArea|Honed Edge|39|162|62}}
{{MapArea|Fencer's Stance|39|392|62}}
{{MapArea|Cleaving Strike|138|63|62}}
{{MapArea|Onrush|138|253|62}}
{{MapArea|Endurance Training|138|392|62}}
{{MapArea|Keeping Distance|237|136|62}}
{{MapArea|Gloat|237|324|62}}
|thumb=right
|caption=Hover over the skill icons to view the detailed descriptions.
}}