Fandom

Archived Help Wiki

Halp:ImageMap

129pages on
this wiki
Add New Page
Talk0 Share
This extension is enabled by default on Wikia.

With the ImageMap feature, you can insert an image map into a Wikia page, which allows different parts of an image to link to different pages. This allows you to use images to enhance your site's navigation.

If you already know how to insert images, then you should be able to use this feature to insert an image while linking polygonal, rectangular or circular regions of that image to different pages. The software outputs HTML <map> and <area> tags so that web browsers can use these maps.

Note: for basic image links, you can use simple image syntax. See here for more details.

How do I create an image map?Edit

The following markup creates the example on this page:

<imagemap>
Image:ImageMap.png|400px|thumb|right|This may look like an ordinary thumbnail ... but try clicking the help logo, the sidebar, or the edit link.

poly 225 172 253 156 327 158 341 172 326 188 246 187 [[Help:Editing|Editing help]]
rect 6 53 272 128 [[Halp:Logo]]
circle 107 260 107 [[Halp:Sidebar|Sidebar help]]

desc bottom-left
</imagemap>
Editing helpHelp:LogoSidebar helpImageMap
About this image

This may look like an ordinary thumbnail ... but try clicking the help logo, the sidebar, or the edit link.

Inside the <imagemap> ... </imagemap> tags, the first line is the usual code for adding an image, without the square brackets. Lines that start with "#" are ignored, so you can use them as comments.

The lines starting with "poly" or "rect" or "circle" allow you to create links. The coordinates are for the original full size image, not the resized 400px image in this example. To measures coordinates, open the full size image in a program that displays them, such as KDE's KolourPaint.

Important note: Any "poly" lines must come before any "rect" or "circle" lines, or the imagemap will not work correctly.


IMAGEMAP CONTAINER MORE INFOEdit

The <imagemap> and </imagemap> command is the container for the imagemap commands. You need to know the original full size image, not the re-sized image. You can click on the image info in the web page or use a picture editing program to give you this information. You can also use the picture editing program to get the X and Y coordinates for the three sub commands.


Start of Imagemap=<imagemap>
Picture to use= Image:poly.jpg|thumb|200px|left|Click on Map
Poly commands= poly 122 87 170 112 267 123 267 219 194 255 146 195 [[ImagemapTest|Hot Poly ]]
Rect commands= rect 87 87 300 183 [[ImagemapTest|Hot Box]]
Circle commands= circle 230 135 37 [[ImagemapTest|Hot Circle ]]
____________________desc bottom-left
End of Imagemap=</imagemap>

All poly commands are put in before using rect and circle commands.

IMAGE COMMANDEdit

______Picture_____________Resize & where__Title
Image:PictureToBe_map.png|thumb|200px|left|Click on Map

POLY COMMANDEdit

The poly command put a hot spot polygon on the image. Poly command is followed by a set of X Y points. The last X Y point is close to the first X Y point.
command__X__Y__X__Y__X___Y___X__Y__X___Y__X___Y__goto page & cursor over text.
_____poly 122 87 170 112 267 123 267 219 194 255 146 195 [[TestMapCommand|Hot Poly]]


All poly commands are put in before using rect and circle commands.

Hot PolyPoly
About this image

Click on Map


RECT COMMANDEdit

The rect command put a hot box on the image. Starts with the rect command then X Y upper left hand corner and X Y lower right hand corner of the hot box. [[Page to go to|Cursor text when hovering]] The first part is the click page to go to and the second part what is displayed when the cursor is hovering over the hot box.

Hot BoxRect
About this image

Click on Map


CIRCLE COMMANDEdit

Circle command has the X Y Radius

Hot CircleCircle
About this image

Click on Map



See alsoEdit

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.