Help:Navigational image

From Meta, a Wikimedia project coordination wiki
If you are not reading this in Meta it is advised that you go there to view this page otherwise some links in this page will not work

By default, an image is linked to its image page: [[File:CatapultMachineForHurlingStones.jpg|80px]]

However, an image can be made to link to another page.

Link parameter[edit]

Example:

[[File:CatapultMachineForHurlingStones.jpg|80px|link=Main Page]]

gives:

See Help:Images_and_other_uploaded_files#Link for details.

ImageMap[edit]

All Wikipedia sites seem to have the mw:Extension:ImageMap installed. Although aimed at multiple areas with different links on an image, one can use it also to link the whole image to a single page. It works on internal and interwiki links.

Help on images (text outside link area)
Help on images (text outside link area)
<imagemap>
Image:Foo.jpg|200px|Help on images (text outside link area)
desc none
#use desc bottom-left to have a blue i link to the image page
default [[w:Help:Images_and_other_uploaded_files]]
</imagemap>

Using the external link format[edit]

In projects that allow the embedding of external images (in which case you see images in the left-hand column of the table below) there are the following possibilities:

(The image can be an internally or externally held image, and the target can be an external URL or a wiki page).

What it looks like What you type
An external image linking to an external page, image, etc.:

http://www.google.com/images/logo.gif

[http://www.google.com http://www.google.com/images/logo.gif]

An external image linking to an internal page:
http://www.google.com/images/logo.gif does not work!

[[Help:Redirect|http://www.google.com/images/logo.gif]]

An external image linking to an internal page with external link style, with :
http://www.google.com/images/logo.gif

[{{SERVER}}{{localurl:Help:Redirect}} http://www.google.com/images/logo.gif]

An internal image linking to an internal page with external link style:
http:../upload/b/bc/Wiki.png Again, there is no automatic link to the image page, use Image:wiki.png. With this method, the same image can be used on another page linking as usual to the image page, or linking to a different target.

[{{SERVER}}{{localurl:Help:Redirect}} http:../upload/b/bc/Wiki.png]

[[Image:wiki.png]]

If you don't want the small icon indicating it is an external link to appear, because it is actually an internal link (and looks untidy), you can surround the image link with code to supress it. This will be most useful to people running their own corporate or independent wikis, rather than Wikimedia sites.
http:../upload/b/bc/Wiki.png
If you are looking at this on Meta, you will not see the effect here as it doesn't allow embedding of 'external' images...

<span class="plainlinks">[{{SERVER}}{{localurl:Help:Redirect}} http:../upload/b/bc/Wiki.png]</span>
  • Using 'span' instead of 'div' means a navigational image can be embedded within text without linebreaks spoiling the show

Thumbnail[edit]

One application is linking a small version of an image to a large one. Example where both are external:

[http://pennine.demon.co.uk/photos/seakayak/xga/Lunga-P7-100-3086.jpg  http://pennine.demon.co.uk/photos/seakayak/small/Lunga-P7-100-3086.jpg]

gives

http://pennine.demon.co.uk/photos/seakayak/small/Lunga-P7-100-3086.jpg

The alternate text is the name of the image, after the last slash in the URL. If you have control over the image, give it a meaningful name; you could even include a text like "click to enlarge" in the name.

Superimposing a hyperlink onto an image[edit]

A linked text can be superimposed onto an image, see Help:Composite images. In particular there can be a dummy text such as an &nbsp; character in a very large font, covering the whole image.

Using Template:Navimg:

top{{navimg|xsize=50|ysize=50|image=Foo.jpg|link=MediaWiki}}bottom

gives:

top

bottom


Similarly with Template:Navimgx for an external link:

top{{navimgx|xsize=50|ysize=50|image=Wikimedia-logo.svg|link=http://meta.wikimedia.org/w/index.php?title=Help:Navigational_image&action=edit&section=4}}bottom

gives:

top

bottom

However, if the browser is set to ignore font sizes specified in web pages then only part of the area in the image links to the specified page, and the rest of the image to the image page. Check the hoverbox or status line to see the target at any position of the mouse cursor. Some versions of the template have the same hoverbox for the two areas.

The image cannot be inline. Positioning can be done e.g., with a table.

Image links were easy to do with the navimg template, but I thought the directions here were lacking a bit;

The Template looks like -

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


Example: {{navimg|xsize=25|ysize=25|image=Wikibooks-logo.png|link=Documentation_Guidelines}}

All attributes are required.
xsize = horizontal
ysize = vertical
image = internal image file
link = internal link location.


The image will always show up on a newline on the left unless you put the image in a table.

Example of image appearing on the right.

{| border="0" cellspacing="0" align="right" style="text-align: left;" |- | {{navimg|xsize=25|ysize=25|image=Wikibooks-logo.png|link=Documentation_Guidelines}}> |}

See also:

See also[edit]

Help contents
Meta · Wikinews · Wikipedia · Wikiquote · Wiktionary · Commons: · Wikidata · MediaWiki · Wikibooks · Wikisource · MediaWiki: Manual · Google
Versions of this help page (for other languages see further)
What links here on Meta or from Meta · Wikipedia · MediaWiki
Reading
Go · Search · Namespace · Page name · Section · Backlinks · Redirect · Category · Image page · Special pages · Printable version
Tracking changes
Recent changes (enhanced) | Related changes · Watching pages · Diff · Page history · Edit summary · User contributions · Minor edit · Patrolled edit
Logging in and preferences
Logging in · Preferences
Editing
Starting a new page · Advanced editing · Editing FAQ · Export · Import · Shortcuts · Edit conflict · Page size
Referencing
Links · URL · Piped links · Interwiki linking · Footnotes
Style and formatting
Wikitext examples · CSS · Reference card · HTML in wikitext · Formula · Lists · Table · Sorting · Colors · Images and file uploads
Fixing mistakes
Show preview · Reverting edits
Advanced functioning
Expansion · Template · Advanced templates · Parser function · Parameter default · Magic words · System message · Substitution · Array · Calculation · Transclusion
Others
Special characters · Renaming (moving) a page · Preparing a page for translation · Talk page · Signatures · Sandbox · Legal issues for editors
Other languages: