Template:Hover Switch: Difference between revisions
Jump to navigation
Jump to search
Tag: Undo |
No edit summary |
||
| Line 1: | Line 1: | ||
<includeonly><div class="thumb t{{{3}}} hcont"> | <includeonly> | ||
<div class="thumbinner"> | <div class="thumb t{{{3}}} hcont"> | ||
<div class=" | <div class="thumbinner"> | ||
<div class=" | <div class="hover-switch"> | ||
<a href="/wiki/File:{{{1}}}"> | |||
<img class="hover-main" src="https://upload.wikimedia.org/wikipedia/commons/thumb/{{{1}}}" alt=""> | |||
</a> | |||
<a href="/wiki/File:{{{2}}}"> | |||
<img class="hover-second" src="https://upload.wikimedia.org/wikipedia/commons/thumb/{{{2}}}" alt=""> | |||
</a> | |||
</div> | |||
<div class="thumbcaption"> | |||
<div class="magnify"> | |||
<a href="/wiki/File:{{{2}}}"> | |||
<img src="http://habboxwiki.com/wiki/skins/common/images/magnify-clip.png" width="15" height="11" alt="Magnify"> | |||
</a> | |||
</div> | |||
{{{4}}} | |||
</div> | |||
</div> | |||
</div> | </div> | ||
< | |||
<style> | |||
.hover-switch { | |||
position: relative; | |||
display: inline-block; | |||
} | |||
.hover-switch img.hover-second { | |||
</ | display: none; | ||
</ | position: absolute; | ||
< | top: 0; | ||
</ | left: 0; | ||
} | |||
.hover-switch:hover img.hover-main { | |||
display: none; | |||
} | |||
.hover-switch:hover img.hover-second { | |||
display: block; | |||
} | |||
</style> | |||
</includeonly> | |||
<noinclude>{{Documentation}} [[Category:Format Templates]]</noinclude> | |||
<noinclude>{{Documentation}} [[Category:Format Templates]]</noinclude> | |||
Revision as of 02:02, 5 February 2026
Documentation
Why to use:
To demonstrate a piece of furniture with two states.
Usage:
{{Hover Switch|<image name 1>|<image name 2>|<alignment, left or right>|<Description>}}
Appearance
{{Hover Switch|Throne.gif|Blue Toilet.gif|left|Testing}}
<a href="/wiki/File:Throne1.gif">
<img class="hover-main" src="https://upload.wikimedia.org/wikipedia/commons/thumb/Throne1.gif" alt="">
</a>
<a href="/wiki/File:LOOSEAT.png">
<img class="hover-second" src="https://upload.wikimedia.org/wikipedia/commons/thumb/LOOSEAT.png" alt="">
</a>
<a href="/wiki/File:LOOSEAT.png">
<img src="http://habboxwiki.com/wiki/skins/common/images/magnify-clip.png" width="15" height="11" alt="Magnify">
</a>
Testing
<style> .hover-switch {
position: relative; display: inline-block;
}
.hover-switch img.hover-second {
display: none; position: absolute; top: 0; left: 0;
}
.hover-switch:hover img.hover-main {
display: none;
}
.hover-switch:hover img.hover-second {
display: block;
} </style>
Documentation
Why to use:
To demonstrate a piece of furniture with two states.
Usage:
{{Hover Switch|<image name 1>|<image name 2>|<alignment, left or right>|<Description>}}
Appearance
{{Hover Switch|Throne.gif|Blue Toilet.gif|left|Testing}}
<a href="/wiki/File:Throne1.gif">
<img class="hover-main" src="https://upload.wikimedia.org/wikipedia/commons/thumb/Throne1.gif" alt="">
</a>
<a href="/wiki/File:LOOSEAT.png">
<img class="hover-second" src="https://upload.wikimedia.org/wikipedia/commons/thumb/LOOSEAT.png" alt="">
</a>
<a href="/wiki/File:LOOSEAT.png">
<img src="http://habboxwiki.com/wiki/skins/common/images/magnify-clip.png" width="15" height="11" alt="Magnify">
</a>
Testing
<style> .hover-switch {
position: relative; display: inline-block;
}
.hover-switch img.hover-second {
display: none; position: absolute; top: 0; left: 0;
}
.hover-switch:hover img.hover-main {
display: none;
}
.hover-switch:hover img.hover-second {
display: block;
} </style>