Шаблон:HoverImage — различия между версиями

Материал из Аэроскан Сервис
Перейти к: навигация, поиск
(Examples)
Строка 1: Строка 1:
 
<div class="hoverbox">
 
<div class="hoverbox">
<div class="hoveritem {{#if:{{{Overlay|}}}||selected}}" {{#if:{{{Overlay|}}}| style="visibility:visible; position:relative;"}}>
+
<div class="hoveritem selected">
 
[[Image:{{{1}}}{{#if:{{{link|}}}|{{!}}link={{{link}}}}}{{#if:{{{alt|}}}|{{!}}alt={{{alt}}}}}{{#if:{{{10|}}}|{{!}}{{{10}}}}}{{#if:{{{9|}}}|{{!}}{{{9}}}}}{{#if:{{{8|}}}|{{!}}{{{8}}}}}{{#if:{{{7|}}}|{{!}}{{{7}}}}}{{#if:{{{6|}}}|{{!}}{{{6}}}}}{{#if:{{{5|}}}|{{!}}{{{5}}}}}{{#if:{{{4|}}}|{{!}}{{{4}}}}}{{#if:{{{3|}}}|{{!}}{{{3}}}}}]]
 
[[Image:{{{1}}}{{#if:{{{link|}}}|{{!}}link={{{link}}}}}{{#if:{{{alt|}}}|{{!}}alt={{{alt}}}}}{{#if:{{{10|}}}|{{!}}{{{10}}}}}{{#if:{{{9|}}}|{{!}}{{{9}}}}}{{#if:{{{8|}}}|{{!}}{{{8}}}}}{{#if:{{{7|}}}|{{!}}{{{7}}}}}{{#if:{{{6|}}}|{{!}}{{{6}}}}}{{#if:{{{5|}}}|{{!}}{{{5}}}}}{{#if:{{{4|}}}|{{!}}{{{4}}}}}{{#if:{{{3|}}}|{{!}}{{{3}}}}}]]
 
</div>
 
</div>
<div class="hoveritem" style="{{#if:{{{HoverPosLeft|}}}|left: {{{HoverPosLeft}}};}} {{#if:{{{HoverPosTop|}}}|top: {{{HoverPosTop}}};}}">
+
<div class="hoveritem">
 
[[Image:{{{2}}}{{#if:{{{link|}}}|{{!}}link={{{link}}}}}{{#if:{{{alt|}}}|{{!}}alt={{{alt}}}}}{{#if:{{{3|}}}|{{!}}{{{3}}}}}{{#if:{{{4|}}}|{{!}}{{{4}}}}}{{#if:{{{5|}}}|{{!}}{{{5}}}}}{{#if:{{{6|}}}|{{!}}{{{6}}}}}{{#if:{{{7|}}}|{{!}}{{{7}}}}}{{#if:{{{8|}}}|{{!}}{{{8}}}}}{{#if:{{{9|}}}|{{!}}{{{9}}}}}{{#if:{{{10|}}}|{{!}}{{{10}}}}}]]
 
[[Image:{{{2}}}{{#if:{{{link|}}}|{{!}}link={{{link}}}}}{{#if:{{{alt|}}}|{{!}}alt={{{alt}}}}}{{#if:{{{3|}}}|{{!}}{{{3}}}}}{{#if:{{{4|}}}|{{!}}{{{4}}}}}{{#if:{{{5|}}}|{{!}}{{{5}}}}}{{#if:{{{6|}}}|{{!}}{{{6}}}}}{{#if:{{{7|}}}|{{!}}{{{7}}}}}{{#if:{{{8|}}}|{{!}}{{{8}}}}}{{#if:{{{9|}}}|{{!}}{{{9}}}}}{{#if:{{{10|}}}|{{!}}{{{10}}}}}]]
 
</div>
 
</div>
Строка 11: Строка 11:
 
{{clear}}
 
{{clear}}
 
== Documentation ==
 
== Documentation ==
This template displays a default image, then another image when the reader hovers over it (e.g. if visual users place their mouse over the image). It is primarily intended for showing an undoctored image to the casual reader, but highlighting certain aspects on close inspection.
+
This template displays a default image, then substitutes another image when the reader hovers over it (e.g. if visual users place their mouse over the image). It is primarily intended for showing an undoctored image to the casual reader, but highlighting certain aspects on close inspection.
 +
 
 +
The
  
 
{{warning|This template may hide useful information from the reader, so should be used with caution}}
 
{{warning|This template may hide useful information from the reader, so should be used with caution}}
Bear in mind that the casual reader may not hover over the image, so will not see the intended effect. In addition, it may be difficult to follow links to the default image, as this will change on hovering. For this reason the effect should be designed to be minimal (see examples below). This can be achieved by making the replacement image similar to the default, or by overlaying a smaller image on top of a larger one. 
+
Bear in mind that the casual reader may not hover over the image, so will not see the intended effect. In addition, it may be difficult to follow links to the default image, as this will change on hovering. For this reason the images should be similar to each other (see examples below).  
  
 
=== Usage ===
 
=== Usage ===
The template is intended to mimic the wikitext convention for  [[mw:Help:images|images]]. The first ''two'' parameters are the names of the default and hover-revealed images respectively. All other parameters are the same as for [[mw:Help:images| images]], and are applied simultaneously to both images, apart from the following two exceptions:
+
The template is intended to mimic the wikitext convention for  [[mw:Help:images|images]]. The first ''two'' parameters are the names of the default and hover-revealed images respectively. All other parameters are the same as for [[mw:Help:images| images]], and are applied simultaneously to both images, apart from the caption. If there is more than one potential caption, then the first caption is used for the default image and the last for the replacement image.
* If there is more than one potential caption, then the first caption is used for the default image and the last for the replacement image.
+
* If the parameter ''Overlay'' is non-blank, then the default image is not hidden (useful for superimposing annotations, arrows, etc on an original picture).
+
* The parameters ''HoverPosLeft'' and ''HoverPosTop'' specify the left and top positions of the hover-revealed image. These are usually used with ''Overlay'' to specify a position for superimposed annotation.
+
  
 
=== Examples ===
 
=== Examples ===
Строка 58: Строка 57:
 
Waterlilies have very prominent sepals|
 
Waterlilies have very prominent sepals|
 
Sepals highlighted by shading the rest in red}}</nowiki>
 
Sepals highlighted by shading the rest in red}}</nowiki>
|-
 
|Many flowers have sepals
 
{{HoverImage|Nymphaea King of the Blues 0801.jpg|Arrow_northeast.svg|thumb|200px|Overlay=Overlay|
 
Waterlilies have very prominent sepals|
 
Highlighted by an arrow}}
 
As shown on this image of a waterlily (hover over the image to highlight the sepals).
 
| It is possible to overlay images as follows
 
<nowiki>{{HoverImage
 
|Nymphaea King of the Blues 0801.jpg|Arrow_northeast.svg|
 
thumb|200px|Overlay=Overlay
 
Waterlilies have very prominent sepals|
 
Highlighted by an arrow}}</nowiki>
 
 
|}
 
|}
  
Строка 75: Строка 62:
 
* No more than 8 additional parameters after the image names. This should be enough for all the [[mw:Help:images|image options]]
 
* No more than 8 additional parameters after the image names. This should be enough for all the [[mw:Help:images|image options]]
 
* This template my need updating if the image syntax changes (e.g. more named parameters allowed)
 
* This template my need updating if the image syntax changes (e.g. more named parameters allowed)
 +
* It may be useful to have a similar template that overlays one or more (different-sizes) pictures or text on top of the default image (e.g. for adding arrows to an image on hovering). A suggested name for this template is [[Template:HoverOverlay]], but this has not yet been coded.
 
[[Category:Image Templates]]
 
[[Category:Image Templates]]
 
</noinclude>
 
</noinclude>

Версия 14:29, 26 февраля 2009

[[Image:{{{1}}}]]

[[Image:{{{2}}}]]

Шаблон:Clear

Documentation

This template displays a default image, then substitutes another image when the reader hovers over it (e.g. if visual users place their mouse over the image). It is primarily intended for showing an undoctored image to the casual reader, but highlighting certain aspects on close inspection.

The

Bear in mind that the casual reader may not hover over the image, so will not see the intended effect. In addition, it may be difficult to follow links to the default image, as this will change on hovering. For this reason the images should be similar to each other (see examples below).

Usage

The template is intended to mimic the wikitext convention for images. The first two parameters are the names of the default and hover-revealed images respectively. All other parameters are the same as for images, and are applied simultaneously to both images, apart from the caption. If there is more than one potential caption, then the first caption is used for the default image and the last for the replacement image.

Examples

(Extra text has been added to show how text wrapping around images works)

Display Markup
Many flowers have sepals

As shown on this image of a waterlily (hover over the image to highlight the sepals).

The simplest form
{{HoverImage
|Nymphaea King of the Blues 0801.jpg|Nymphaea_King_of_the_Blues_0801-highlight_sepals.jpg}}
Many flowers have sepals

[[File:Nymphaea King of the Blues 0801.jpgШаблон:!200pxШаблон:! left]]

As shown on this image of a waterlily (hover over the image to highlight the sepals).

Extra image options (e.g. make smaller, float)
{{HoverImage
|Nymphaea King of the Blues 0801.jpg|Nymphaea_King_of_the_Blues_0801-highlight_sepals.jpg|
left|200px}}
Many flowers have sepals

As shown on this image of a waterlily (hover over the image to highlight the sepals).

Captions can be changed depending on the image
{{HoverImage
|Nymphaea King of the Blues 0801.jpg|Nymphaea_King_of_the_Blues_0801-highlight_sepals.jpg|
thumb|200px|
Waterlilies have very prominent sepals|
Sepals highlighted by shading the rest in red}}

Limitations

  • No more than 8 additional parameters after the image names. This should be enough for all the image options
  • This template my need updating if the image syntax changes (e.g. more named parameters allowed)
  • It may be useful to have a similar template that overlays one or more (different-sizes) pictures or text on top of the default image (e.g. for adding arrows to an image on hovering). A suggested name for this template is Template:HoverOverlay, but this has not yet been coded.