Template:ClickExternal: Difference between revisions

From The Urban Dead Wiki
Jump to navigationJump to search
(New page: <div style="display: inline-block; height: {{{height}}}; width: {{{width}}}; overflow: hidden; vertical-align: text-bottom;">[{{{link}}} <span style="position: absolute; display: block; fo...)
 
No edit summary
Line 1: Line 1:
<div style="display: inline-block; height: {{{height}}}; width: {{{width}}}; overflow: hidden; vertical-align: text-bottom;">[{{{link}}} <span style="position: absolute; display: block; font-size: 0px; height: {{{height}}}; width: {{{width}}};" title="{{{mouseover}}}">&nbsp;</span>][[Image:{{{image}}}|{{{width}}}]]<span style = "background-color: #f08; display: block; width: 100%; height: 100%;">'''Use a smaller height''' if you can see this message.</span></div>
<includeonly><div style="display: inline-block; height: {{{height}}}; width: {{{width}}}; overflow: hidden; vertical-align: text-bottom;">[{{{link}}} <span style="position: absolute; display: block; font-size: 0px; height: {{{height}}}; width: {{{width}}};" title="{{{mouseover}}}">&nbsp;</span>][[Image:{{{image}}}|{{{width}}}]]<span style = "background-color: #f08; display: block; width: 100%; height: 100%;">'''Use a smaller height''' if you can see this message.</span></div></includeonly><noinclude>
===Usage===
Give images your own link to a page off of the wiki.
 
*''link'' and ''image'' don't need square brackets.
*''height'' and ''width'' must be specified in px and should match the image's size.
**If the sizes are not correct, you may see a message with a hot pink background; simply decrease the height
*'''This template will not work in IE version 8 or lower.''' It doesn't break the page however, so it's safe to use.
**Unfortunately, there's no obvious fix for IE, so you should provide a separate link elsewhere for IE users.
 
===Example===
<pre>
{{ClickExternal
|link=http://www.google.com
|image=Example.jpg
|width=200px
|height=150px
|mouseover=You'll see this when you mouseover the image
}}
</pre>
Will produce:
{{ClickExternal
|link=http://www.google.com
|image=Example.jpg
|width=200px
|height=150px
|mouseover=You'll see this when you mouseover the image
}}
 
[[Category:Utility Templates|{{PAGENAME}}]]</noinclude>

Revision as of 19:45, 8 August 2010

Usage

Give images your own link to a page off of the wiki.

  • link and image don't need square brackets.
  • height and width must be specified in px and should match the image's size.
    • If the sizes are not correct, you may see a message with a hot pink background; simply decrease the height
  • This template will not work in IE version 8 or lower. It doesn't break the page however, so it's safe to use.
    • Unfortunately, there's no obvious fix for IE, so you should provide a separate link elsewhere for IE users.

Example

{{ClickExternal
 |link=http://www.google.com
 |image=Example.jpg
 |width=200px
 |height=150px
 |mouseover=You'll see this when you mouseover the image
}}

Will produce:

 Example.jpgUse a smaller height if you can see this message.