Difference between revisions of "Widget:Skill Tree"

From UnderWiki
Jump to navigation Jump to search
Line 39: Line 39:
 
<div id="skillmagic23<!--{$seed|escape:'html'|default:'1'}-->" style="position: absolute;width:calc((<!--{$width|escape:'html'|default:'1024'}--> / 3712) * 128px);height:calc((<!--{$width|escape:'html'|default:'1024'}--> / 3712) * 128px);left:calc((2176 / 3712) * <!--{$width|escape:'html'|default:'1024'}-->px);top:calc((1331 / 1744) * (296 / 3712) * <!--{$width|escape:'html'|default:'1024'}-->px);display:none;background-size:cover;background-image: url('https://underwiki.com/images/9/93/Magic_Skill_active.png');<!--{if isset($poilink)}-->cursor: pointer;<!--{/if}-->z-index:2<!--{$seed|escape:'html'|default:'1'}-->">&nbsp;</div>
 
<div id="skillmagic23<!--{$seed|escape:'html'|default:'1'}-->" style="position: absolute;width:calc((<!--{$width|escape:'html'|default:'1024'}--> / 3712) * 128px);height:calc((<!--{$width|escape:'html'|default:'1024'}--> / 3712) * 128px);left:calc((2176 / 3712) * <!--{$width|escape:'html'|default:'1024'}-->px);top:calc((1331 / 1744) * (296 / 3712) * <!--{$width|escape:'html'|default:'1024'}-->px);display:none;background-size:cover;background-image: url('https://underwiki.com/images/9/93/Magic_Skill_active.png');<!--{if isset($poilink)}-->cursor: pointer;<!--{/if}-->z-index:2<!--{$seed|escape:'html'|default:'1'}-->">&nbsp;</div>
  
<div id="skillcombat" class="libre" style="color: white;position: absolute;top: calc((1331 / 1744) * (1931 / 3712) * <!--{$width|escape:'html'|default:'1024'}-->px);left: calc((1343 / 3712) * <!--{$width|escape:'html'|default:'1024'}-->px);font-weight:bold;width: 6.5%;text-align: center;font-size: calc(<!--{$width|escape:'html'|default:'1024'}-->/100 * 1.1px);z-index: 100;">COMBAT</div>
+
<div id="skillcombat" class="libre" style="color: white;position: absolute;top: calc((1331 / 1744) * (1931 / 3712) * <!--{$width|escape:'html'|default:'1024'}-->px);left: calc((1343 / 3712) * <!--{$width|escape:'html'|default:'1024'}-->px);font-weight:bold;width: 6.5%;text-align: center;font-size: calc(<!--{$width|escape:'html'|default:'1024'}-->/100 * 1.16px);z-index: 100;">COMBAT</div>
<div id="skillmagic" class="libre" style="color: white;position: absolute;top: calc((1331 / 1744) * (1600 / 3712) * <!--{$width|escape:'html'|default:'1024'}-->px);left: 0;font-weight:bold;width: 100%;text-align:center;font-size: calc(<!--{$width|escape:'html'|default:'1024'}-->/100 * 1.1px);z-index: 100;">MAGIC</div>
+
<div id="skillmagic" class="libre" style="color: white;position: absolute;top: calc((1331 / 1744) * (1600 / 3712) * <!--{$width|escape:'html'|default:'1024'}-->px);left: 0;font-weight:bold;width: 100%;text-align:center;font-size: calc(<!--{$width|escape:'html'|default:'1024'}-->/100 * 1.16px);z-index: 100;">MAGIC</div>
<div id="skillstealth" class="libre" style="color: white;position: absolute;top: calc((1331 / 1744) * (1931 / 3712) * <!--{$width|escape:'html'|default:'1024'}-->px);left: calc((2139 / 3712) * <!--{$width|escape:'html'|default:'1024'}-->px);font-weight:bold;width: 6.5%;text-align: center;font-size: calc(<!--{$width|escape:'html'|default:'1024'}-->/100 * 1.1px);z-index: 100;">STEALTH</div>
+
<div id="skillstealth" class="libre" style="color: white;position: absolute;top: calc((1331 / 1744) * (1931 / 3712) * <!--{$width|escape:'html'|default:'1024'}-->px);left: calc((2139 / 3712) * <!--{$width|escape:'html'|default:'1024'}-->px);font-weight:bold;width: 6.5%;text-align: center;font-size: calc(<!--{$width|escape:'html'|default:'1024'}-->/100 * 1.16px);z-index: 100;">STEALTH</div>
 
<div id="skillmap<!--{$seed|escape:'html'|default:'1'}-->" style="width:<!--{$width|escape:'html'|default:'1024'}-->px;height:calc((<!--{$width|escape:'html'|default:'1024'}--> / 3712) * 1744px);position:absolute;top:0;left:0;display:flex;z-index:99;">
 
<div id="skillmap<!--{$seed|escape:'html'|default:'1'}-->" style="width:<!--{$width|escape:'html'|default:'1024'}-->px;height:calc((<!--{$width|escape:'html'|default:'1024'}--> / 3712) * 1744px);position:absolute;top:0;left:0;display:flex;z-index:99;">
 
<img id="base_sel<!--{$seed|escape:'html'|default:'1'}-->" src="https://underwiki.com/images/4/48/Trans.png" width="3712" height="1744" style="width:<!--{$width|escape:'html'|default:'1024'}-->px;height:calc((<!--{$width|escape:'html'|default:'1024'}--> / 3712) * 1744px);" usemap="#skill_map<!--{$seed|escape:'html'|default:'1'}-->">
 
<img id="base_sel<!--{$seed|escape:'html'|default:'1'}-->" src="https://underwiki.com/images/4/48/Trans.png" width="3712" height="1744" style="width:<!--{$width|escape:'html'|default:'1024'}-->px;height:calc((<!--{$width|escape:'html'|default:'1024'}--> / 3712) * 1744px);" usemap="#skill_map<!--{$seed|escape:'html'|default:'1'}-->">

Revision as of 13:22, 9 April 2019

This widget inserts an imagemap of the skills.

Parameters

width
Width of the skills pane, in pixels. Default is 1024 pixels.

Special Parameters

seed
If included more than once on a page, you can override this value so the imagemap and layers are controlled separately in each. The default seed value is '0'.