|
|
| (One intermediate revision by the same user not shown) |
| Line 1: |
Line 1: |
| <noinclude>
| | <includeonly><div class="dynamic-gif-container" id="gif-display-{{{id|{{{title|default}}}}}}" data-gif-list="{{{list|}}}" data-gif-size="{{{size|400}}}"> |
| This template creates a dynamic GIF display area that shows different GIFs based on which skill tree tooltip is being hovered.
| | <div class="gif-display-area"> |
| | | <div class="gif-header"> |
| == Usage ==
| | <div class="gif-title">{{{title|Skill Showcase}}}</div> |
| <pre>
| | </div> |
| {{DynamicGifDisplay
| | <div class="gif-image-container"> |
| |title=Display Title
| | <div class="gif-placeholder">Hover over a skill node to see its demonstration</div> |
| |list=SkillName1:gif1.gif;SkillName2:gif2.gif;SkillName3:gif3.gif
| | </div> |
| |id=unique-id (optional)
| | <div class="gif-caption"></div> |
| }}
| | </div> |
| </pre>
| | </div></includeonly><noinclude>{{Documentation}}</noinclude> |
| | |
| == Parameters ==
| |
| * '''title''': The title displayed in the GIF display header
| |
| * '''list''': Semicolon-separated list of skill names and their corresponding GIF filenames in format "SkillName:filename.gif"
| |
| * '''id''': Optional unique identifier (auto-generated if not provided)
| |
| | |
| == Example ==
| |
| <pre>
| |
| {{DynamicGifDisplay
| |
| |title=Skill Tree Node Showcase
| |
| |list=Null and Void:nullandvoid.gif;One and True:oneandtrue.gif;Size and Scale:sizeandscale.gif
| |
| }}
| |
| </pre>
| |
| | |
| The skill names in the list parameter must EXACTLY match the skill titles in your tooltips (case-sensitive).
| |
| | |
| </noinclude><includeonly><div class="dynamic-gif-container" id="gif-display-{{{id|{{{title|default}}}}}}" data-gif-list="{{{list|}}}" data-gif-size="{{{size|400}}}"> | |
| <div class="gif-display-area"> | |
| | |
| <div class="gif-title">{{{title|Skill Showcase}}}</div> | |
| </div>
| |
| <div class="gif-image-container"> | |
| <div class="gif-placeholder">Hover over a skill node to see its demonstration</div> | |
| </div>
| |
| <div class="gif-caption"></div> | |
| </div>
| |
| </div></includeonly> | |
