Template:Click - Revision history

Fotis at 00:14, 12 January 2007

2007-01-12T00:14:03Z

Fotis at 19:26, 11 January 2007

2007-01-11T19:26:19Z

Fotis at 19:24, 11 January 2007

2007-01-11T19:24:51Z

Fotis at 19:24, 11 January 2007

2007-01-11T19:24:08Z

Fotis at 19:22, 11 January 2007

2007-01-11T19:22:44Z

Fotis at 20:32, 10 January 2007

2007-01-10T20:32:12Z

New page

<div style="position: relative; width: {{{width}}}; height: {{{height}}}; overflow: hidden;">
<div style="position: absolute; top: 0px; left: 0px; font-size: 100px; overflow: hidden; line-height: 100px; z-index: 3;">[[{{{link}}}|   ]]</div>
<div style="position: absolute; top: 0px; left: 0px; z-index: 2;">[[Image:{{{image}}}|{{{width}}}|{{{link}}}]]</div>
</div>
<noinclude>

'''Usage:''' <nowiki>{{Click | image=myimage.png | link=PageName | width=10px | height=10px}}</nowiki>

This template attempts to superimpose an invisible link on an image, such that clicking on the image does ''not'' take you to the image description page (normal behaviour).

It's useful for small icons/logos which are representative of an article, and which a user might click on expecting to be taken to that article. Here we are using it on the [[Main Page]] for example. It's use should minimised because of the following problems.

==== Problems ====

It doesn't work in text-only browsers, and in screen readers for the disabled, and possibly other situations. The technique of using [[w:CSS|CSS]] to change page content also completely breaks an article's [[w:web accessibility|web accessibility]] by contravening a [[w:WAI|WAI]] priority-one checkpoint.[http://www.w3.org/TR/WAI-WEBCONTENT/#tech-order-style-sheets]

==== See also ====
* [http://en.wikipedia.org/wiki/Template:Click Template:Click on wikipedia] where we got this from.
* [[Mediazilla:539|<span title="ASSIGNED: Allow images that link somewhere other than the image page">Bug 539</span>]] - Feature request to allow linked images without nasty CSS.

</noinclude>

@@ Line 1: / Line 1: @@
 <div style="position: relative; width: {{{width}}}; height: {{{height}}}; overflow: hidden;">
-<div style="position: absolute; top: 0px; left: 0px; font-size: 146px; overflow: hidden; line-height: 146px; z-index: 3;">[[{{{link}}}|&nbsp;&nbsp;&nbsp;]]</div>
+<div style="position: absolute; top: 0px; left: 0px; font-size: 154px; overflow: hidden; line-height: 154px; z-index: 3;">[[{{{link}}}|&nbsp;&nbsp;&nbsp;]]</div>
 <div style="position: absolute; top: 0px; left: 0px; z-index: 2;">[[Image:{{{image}}}|{{{width}}}|{{{link}}}]]</div>
 </div>

@@ Line 1: / Line 1: @@
 <div style="position: relative; width: {{{width}}}; height: {{{height}}}; overflow: hidden;">
-<div style="position: absolute; top: 0px; left: 0px; font-size: 128px; overflow: hidden; line-height: 128px; z-index: 3;">[[{{{link}}}|&nbsp;&nbsp;&nbsp;]]</div>
+<div style="position: absolute; top: 0px; left: 0px; font-size: 146px; overflow: hidden; line-height: 146px; z-index: 3;">[[{{{link}}}|&nbsp;&nbsp;&nbsp;]]</div>
 <div style="position: absolute; top: 0px; left: 0px; z-index: 2;">[[Image:{{{image}}}|{{{width}}}|{{{link}}}]]</div>
 </div>

@@ Line 1: / Line 1: @@
 <div style="position: relative; width: {{{width}}}; height: {{{height}}}; overflow: hidden;">
-<div style="position: absolute; top: 0px; left: 0px; font-size: 100px; overflow: hidden; line-height: 100px; z-index: 3;">[[{{{link}}}|&nbsp;&nbsp;&nbsp;]]</div>
+<div style="position: absolute; top: 0px; left: 0px; font-size: 128px; overflow: hidden; line-height: 128px; z-index: 3;">[[{{{link}}}|&nbsp;&nbsp;&nbsp;]]</div>
 <div style="position: absolute; top: 0px; left: 0px; z-index: 2;">[[Image:{{{image}}}|{{{width}}}|{{{link}}}]]</div>
 </div>

@@ Line 4: / Line 4: @@
 </div>
 <noinclude>
@@ Line 22: / Line 13: @@
 ==== Problems ====
 See [http://en.wikipedia.org/wiki/Template:Click Template:Click on wikipedia] where we got this from.
-It doesn't work in text-only browsers, and in screen readers for the disabled, and possibly other situations.  The technique of using [[w:CSS|CSS]] to change page content also completely breaks an article's [[w:web accessibility|web accessibility]] by contravening a [[w:WAI|WAI]] priority-one checkpoint.[http://www.w3.org/TR/WAI-WEBCONTENT/#tech-order-style-sheets]
-−
-==== See also ====
-* [http://en.wikipedia.org/wiki/Template:Click Template:Click on wikipedia] where we got this from.
-* [[Mediazilla:539|<span title="ASSIGNED: Allow images that link somewhere other than the image page">Bug 539</span>]] - Feature request to allow linked images without nasty CSS.
-−
 </noinclude>