New book - 'Building a Better World in Your Backyard' - on Kickstarter (sponsored friend)


From Appropedia
Jump to: navigation, search

ImageMap allows an image to be used without pointing to the file page for the image - it can be without link, or link to a page. This is useful where people are likely to perceive image links as pointing to an actual page, e.g. highlighted pages on portals and main page.

An easy way to use ImageMap is with {{imagemap}}. Otherwise, there are two options:

Note. It is not necessary to use ImageMap if the intention is to link to another page by clicking anywhere on the image. For this purpose, simply add "link=<pagename>" to the file specification.

For example, "[[File:Appropedia-logo.jpg|20px|link=Appropedia:About|About Appropedia]]" generates a logo About Appropedia that links to the page Appropedia:About.

Using #tag or <imagemap>[edit]

"#tag" allows use of ImageMap in templates:

{{#tag:imagemap|Image:Cob4.gif default [[wikipedia:]] desc bottom-right }}


About this image

equivalent to direct use of the imagemap tag:

<imagemap> Image:Cob4.gif default [[wikipedia:]] desc bottom-right </imagemap>


About this image

Setting the image size[edit]

{{#tag:imagemap|Image:Cs-sfd-Dehydrator-cilantro.jpg{{!}}250px{{!}}center{{!}} rect 1 1 640 431 [[Chris's ENGR305 Solar Food Dehydrator]] desc bottom-right }}

This creates the image at 250px in size, below. The coordinates are taken from the size of the image (this isn't exactly right - what's happening here? --Chriswaterguy 00:18, 18 March 2010 (UTC)). Note that {{!}} creates the | character for the imagemap (which otherwise would be misinterpreted by the template).

Chris's ENGR305 Solar Food DehydratorCs-sfd-Dehydrator-cilantro.jpg
About this image

Note this is equivalent to the following, directly using the imagemap tag:

<imagemap> Image:Cs-sfd-Dehydrator-cilantro.jpg|250px|center| rect 1 1 640 431 [[Chris's ENGR305 Solar Food Dehydrator]] # rect 1 1 is at the top left corner. Use Image resolution values for the bottom right corner. </imagemap>