Fandom Developers Wiki
Advertisement

ResponsiveImageMap is an import of a jQuery plugin from GitHub, which allows image maps to be responsive to size changes.

An image map is an image which contains different regions linked to different pages. On Fandom, image maps can be created by using the <imagemap> tags. For instructions about creating an image map, see Help:ImageMap on Community Central.

Image maps, not only on Fandom but in general, are not natively responsive, meaning that changing the image size with CSS will result in the linked coordinates misaligned.

On Fandom, the image can be resized to a different size than it's original size, but that size must appear in the source code and it cannot be easily changed by CSS to fit the available space. If changed by CSS regardless, the linked regions become misaligned as described above.

This plugin handles size changes by recalculating the coordinates of the map, when the page is loaded and whenever the browser window is resized. The version of the script here on Dev Wiki was modified in order to be compatible with the way image maps are created and used on Fandom.

Note that (with or without this plugin) the original coordinates of the image map must refer to the original size of the image, not to the modified size.


Installation

Step 1: Importing the script


Step 2: Adding CSS


Instructions

On the page source code, wrap the image maps you want to be responsive by an element with the class responsive-imagemap. For example:

<div class="responsive-imagemap">
<imagemap>
File:Foo.jpg|200px|picture of a foo
poly 131 45 213 41 210 110 127 109 [[Monitor]]
poly 104 126 105 171 269 162 267 124 [[Keyboard]]
rect 15 95 94 176 [[Human|Girl]]
# A comment, this line is ignored
circle 57 57 20 [[Copyright]]
desc bottom-left
</imagemap>
</div>

(The example of the image map code itself is copied from the help page mentioned above)

Then, you can resize the image with CSS and the linked areas will remain aligned. The simple way to get advantage of this is to make the image simply occupy the entire available width. This can be achieved by the following CSS:

.responsive-imagemap img {
    width: 100%;
    height: auto;
}

That code should be placed in the wiki's CSS page, typically MediaWiki:Common.css


Changelog

November 14, 2021
Initial import

See also

Text above can be found here (edit)
Advertisement