Template:Superimpose/doc: Difference between revisions

From Tardis Wiki, the free Doctor Who reference
m (Protected "Template:Superimpose/doc": Robot: Protecting all pages from category templates (‎[edit=sysop] (indefinite) ‎[move=sysop] (indefinite)))
 
(9 intermediate revisions by 2 users not shown)
Line 1: Line 1:
{{tl|{{PAGENAME}}}} is a utility which superimposes one image over another, and positions it relative to the top left corner of the bottom image. Although [[w:Template:GBthumb|the original idea]] was to place a dot on a locator map based on editable coordinates, it can be used to precisely overlay any two images for any reason.
{{tl|{{PAGENAME}}}} is a utility which superimposes one image over another, and positions it relative to the top left corner of the bottom image. Although [[w:Template:GBthumb|the original idea]] was to place a dot on a locator map based on editable coordinates, it can be used to precisely overlay any two images for any reason.
==Source==
== Source ==
This text and template originally came from [[wikipedia:template:superimpose]].
This text and template originally came from [[wikipedia:template:superimpose]].
==Usage==
== Usage ==


===Example===
=== Example ===


<div style="float: right;">
<div style="clear:both;float: middle;">
{{Superimpose
{{Superimpose
   | base =2ndBenPollyPOTD.jpg
   | base =2ndBenPollyPOTD.jpg
Line 13: Line 13:
   | base_caption = A trio of ideas
   | base_caption = A trio of ideas
   | float = WhiteFade400px.png
   | float = WhiteFade400px.png
   | float_width = 450px
   | float_width = 400px
   | x = 0
   | x = 50
   | y = -30
   | y =-100
}}
}}</div>
 
 
:Here, we can see the effect of overlaying a transparent mask on top of an image.  You'd traditionally do this in your image editing software, but it might be useful on, say, [[Doctor Who Wiki|the main page]] to establish a standard-sized picture, which would then naturally call for a standard-sized transparency mask.  In that sort of "regularized" situation, it would actually be faster to use this template than to make up custom graphics.  
:Here, we can see the effect of overlaying a transparent mask on top of an image.  You'd traditionally do this in your image editing software, but it might be useful on, say, [[Doctor Who Wiki|the main page]] to establish a standard-sized picture, which would then naturally call for a standard-sized transparency mask.  In that sort of "regularized" situation, it would actually be faster to use this template than to make up custom graphics.  


:The other big utility for this template is in the demonstration of a location on a map.  You can create a graphic of a red dot, and then precisely control where that dot goes, thereby obviating the need to create a lot of custom graphics for each map location you wish to illustrate.
:The other big utility for this template is in the demonstration of a location on a map.  You can create a graphic of a red dot, and then precisely control where that dot goes, thereby obviating the need to create a lot of custom graphics for each map location you wish to illustrate.
</div>
 
:Here's the code:
<pre style="overflow:auto;">
<pre style="overflow:auto;">
{{Superimpose
{{Superimpose
Line 28: Line 31:
   | base_caption = A trio of ideas
   | base_caption = A trio of ideas
   | float = WhiteFade400px..png
   | float = WhiteFade400px..png
   | float_width = 450px
   | float_width = 400px
   | x = 0  
   | x = 10  
  | y = 0
  | y = -30
}}
}}
</pre>
</pre>
Line 79: Line 82:
* '''base_caption:''' Text to show when a user's mouse hovers over the base image; ignored if '''base_link''' is specified to be empty
* '''base_caption:''' Text to show when a user's mouse hovers over the base image; ignored if '''base_link''' is specified to be empty
* '''base_link:''' Name of page that the user should be sent to if they click on the base image. The special value "<code>file:</code>", stands for the file page for the base image. If empty, nothing happens if the user clicks on the base image. The default is "<code>file:</code>".
* '''base_link:''' Name of page that the user should be sent to if they click on the base image. The special value "<code>file:</code>", stands for the file page for the base image. If empty, nothing happens if the user clicks on the base image. The default is "<code>file:</code>".
* '''float:''' File name of the top image
* '''float:''' File name of the top image
* '''float_width:''' Width to display the top image, ''in pixels''
* '''float_width:''' Width to display the top image, ''in pixels''
* '''float_alt:''' Alt text for the top image. This is needed only if '''float_link''' is nonempty. Normally the alt text for the base image describes the combination of the two images, and this parameter is not needed.
* '''float_alt:''' Alt text for the top image. This is needed only if '''float_link''' is nonempty. Normally the alt text for the base image describes the combination of the two images, and this parameter is not needed.
* '''float_caption:''' Text to show when a user's mouse hovers over the top image; ignored if '''float_link''' is missing or empty
* '''float_caption:''' Text to show when a user's mouse hovers over the top image; ignored if '''float_link''' is missing or empty
Line 86: Line 89:
* '''x:''' distance to offset the top image from the left edge of the base image, ''in pixels or any other CSS-standard units''
* '''x:''' distance to offset the top image from the left edge of the base image, ''in pixels or any other CSS-standard units''
* '''y:''' distance to offset the top image from the top edge of the base image, ''in pixels or any other CSS-standard units''
* '''y:''' distance to offset the top image from the top edge of the base image, ''in pixels or any other CSS-standard units''
 
<noinclude>[[category:template documentation|{{PAGENAME}}]]</noinclude>
=== A Note about the Locator Dot ===
 
I originally built this template thinking I could use an SVG file with transparency (mostly for the dot in locator maps). However, it seems Internet Explorer users can't handle transparent PNGs without a fix that Wikimedia's not yet delivering, so for now I recommend using the GIF version in the example above. When IE better supports PNGs, we can swap the better format back in.
&mdash;[[User:Papayoung|Papayoung]] [[User_talk:Papayoung|&#9775;]] 02:06, 26 October 2005 (UTC)

Latest revision as of 02:15, 13 May 2013

{{Superimpose/doc}} is a utility which superimposes one image over another, and positions it relative to the top left corner of the bottom image. Although the original idea was to place a dot on a locator map based on editable coordinates, it can be used to precisely overlay any two images for any reason.

Source

This text and template originally came from wikipedia:template:superimpose.

Usage

Example

{{
  1. if: 50
|
}}


Here, we can see the effect of overlaying a transparent mask on top of an image. You'd traditionally do this in your image editing software, but it might be useful on, say, the main page to establish a standard-sized picture, which would then naturally call for a standard-sized transparency mask. In that sort of "regularized" situation, it would actually be faster to use this template than to make up custom graphics.
The other big utility for this template is in the demonstration of a location on a map. You can create a graphic of a red dot, and then precisely control where that dot goes, thereby obviating the need to create a lot of custom graphics for each map location you wish to illustrate.
Here's the code:
{{Superimpose
  | base =2ndBenPollyPOTD.jpg
  | base_width = 400px
  | base_alt = 
  | base_caption = A trio of ideas
  | float = WhiteFade400px..png
  | float_width = 400px
  | x = 10  
 | y = -30
}}

Using the Template

To get started, you can simply copy this blank definition into your page, and fill in the data.

{{Superimpose
  | base = 
  | base_width = 
  | base_alt = 
  | base_caption = 
  | float = 
  | float_width = 
  | x = 
  | y = 
}}

The following blank definition includes all the parameters, including those less-commonly used.

{{Superimpose
  | base = 
  | base_width = 
  | base_alt = 
  | base_caption = 
  | base_link = 
  | float = 
  | float_alt = 
  | float_width = 
  | float_caption = 
  | float_link = 
  | x = 
  | y = 
}}

Parameter Definitions

  • base: File name of the base (bottom) image
  • base_width: Width to display the base image, in pixels
  • base_alt: Alt text for the image, for visually impaired readers; see Wikipedia:Alternative text for images. This normally describes the combination of the two images.
  • base_caption: Text to show when a user's mouse hovers over the base image; ignored if base_link is specified to be empty
  • base_link: Name of page that the user should be sent to if they click on the base image. The special value "file:", stands for the file page for the base image. If empty, nothing happens if the user clicks on the base image. The default is "file:".
  • float: File name of the top image
  • float_width: Width to display the top image, in pixels
  • float_alt: Alt text for the top image. This is needed only if float_link is nonempty. Normally the alt text for the base image describes the combination of the two images, and this parameter is not needed.
  • float_caption: Text to show when a user's mouse hovers over the top image; ignored if float_link is missing or empty
  • float_link: Name of page that the user should be sent to if they click on the top image. This acts like base_link, except it is for the top image, and it defaults to empty.
  • x: distance to offset the top image from the left edge of the base image, in pixels or any other CSS-standard units
  • y: distance to offset the top image from the top edge of the base image, in pixels or any other CSS-standard units