Difference between revisions of "Template:Click"
(New page: <includeonly><div style="position: relative; width: {{{width}}}; height: {{{height}}}; overflow: hidden;"><div style="position: absolute; top: 0px; left: 0px; font-size: 100px; overflow: h...) |
|||
| (One intermediate revision by one other user not shown) | |||
| Line 1: | Line 1: | ||
<includeonly><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> | <includeonly><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 style="position: absolute; top: 0px; left: 0px; z-index: 2;">[[Image:{{{image}}}|{{{width}}}|{{{link}}}|{{{position}}}]]</div> |
</div></includeonly><noinclude> | </div></includeonly><noinclude> | ||
| − | '''Usage:''' <nowiki>{{Click | image=myimage.png | link=PageName | width=10px | height=10px}}</nowiki> | + | '''Usage:''' <nowiki>{{Click | image=myimage.png | link=PageName | width=10px | height=10px | posistion=left }}</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). | 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 | + | 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. It's use should minimised because of the following problems. |
==== 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 | + | It doesn't work in text-only browsers, and in screen readers for the disabled, and possibly other situations. The technique of using CSS to change page content also completely breaks an article's web accessibility by contravening a WAI priority-one checkpoint.[http://www.w3.org/TR/WAI-WEBCONTENT/#tech-order-style-sheets] |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
</noinclude> | </noinclude> | ||
Latest revision as of 09:17, 25 September 2007
Usage: {{Click | image=myimage.png | link=PageName | width=10px | height=10px | posistion=left }}
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. 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 CSS to change page content also completely breaks an article's web accessibility by contravening a WAI priority-one checkpoint.[1]
