Extension talk:ImageMap

From MediaWiki.org
Jump to: navigation, search


Thread titleRepliesLast modified
Resizing an ImageMap with parameters320:35, 17 December 2013
externLink and $wgNoFollowDomainExceptions110:32, 6 November 2013
Zoom confuses it000:41, 3 November 2013
Getting Started210:27, 31 October 2013
Imagemap Area highlight script2416:05, 15 May 2013
Why is the icon so different from the thumb icon?311:53, 5 March 2013
Third link keeps messing up, slow to load102:31, 11 December 2012
External link in other windows400:09, 13 November 2012
Use ImageMap with Inline Linking that is ImageMap on images not uploaded to wiki418:56, 4 November 2012
Need to distinguish "red" links from "blue" links (and add external, while you're at it)415:02, 23 April 2012
Text Wrapping118:07, 22 April 2012

Resizing an ImageMap with parameters

Hello, I'm trying to make an ImageMap template that accepts a size parameter. I've gotten as far as this and it still isn't working with an input such as: {{X9|400px}} using this at the beginning of the template: {{#tag:imagemap|File:New_Jersey_Counties.svg{{!}}thumb{{!}}right{{!}}{{{1{{!}}200px}}}{{!}}A clickable New Jersey county map ... }} Thanks!

Macaddct1984 (talk)04:33, 17 December 2013

And what about: {{#tag:imagemap|File:New_Jersey_Counties.svg{{!}}thumb{{!}}right{{!}}{{{1|200px}}}{{!}}A clickable New Jersey county map ... }} ?

Using pipe instead of {{!}} for the parameter separator. At least, if I change the default 200px to something else, the image gets resized, so it should work, although I didn't checked transcluding the template.

Ciencia Al Poder (talk)10:30, 17 December 2013

That fixed it, thank you! Is it worth adding something about that in the usage with templates, magic words, or parser functions. section? At the moment it reads as though every pipe in the source text should be replaced with a {{!}}

Macaddct1984 (talk)13:37, 17 December 2013

Actually, the examples doesn't encode the pipe inside links, as it's not necessary in that context, but it's worth noting it. Done.

Ciencia Al Poder (talk)20:35, 17 December 2013

externLink and $wgNoFollowDomainExceptions

Edited by another user.
Last edit: 10:32, 6 November 2013

Currently the extension does not support:


I had to change Line 200 in ImageMap_body.php

// OLD
if ( $wgNoFollowLinks ) {
// NEW
if ( ($wgNoFollowLinks) AND (array_search ($externLink, $wgNoFollowDomainExceptions)) ) {, 6 November 2013

Zoom confuses it

Not sure about prior versions, but I just noticed that under IE 11.0.9600.16411, everything works great at zoom 100%, but if I go to zoom 125% then some or all of the popups stop working. This even happens on the "Club" example on this MediaWiki page. In case you care, my particular application, with which I was just pleased as punch but may now need to abandon, is here [1] EEng (talk) 00:41, 3 November 2013 (UTC)

EEng (talk)00:41, 3 November 2013

Getting Started

Edited by another user.
Last edit: 10:22, 31 October 2013

Hi, was hoping someone could put me out of my misery..

I'm trying to instal Media Wiki with ImageMap that's it. I keep getting left with white pages, some that I managed to turn into php error pages and then try to fix and now just white.

I have followed installation instructions as far as I know. The extension is visible under the special page. And the Wiki works fine excluding the extension. When I try and run the extension php file I just get white, I've tested it with another extension and same. From what I have been able to gather its probably a php error. Originally the server was still running 5.2 and when I first turned on error messages this was a problem due to __dir__, but have now tried it having updated the php on the sever to both 5.3 and 5.4. No doubt and obvious thing I'm doing wrong, but what??

Php settings are http://nunki.org/wiki/index.php/File:Php_Settings_1.png http://nunki.org/wiki/index.php/File:PhP_Settings_2.png

MediaWiki Version http://nunki.org/wiki/index.php/File:Mediawiki_Settings.png

Any help gratefully appreciated,

James, 30 October 2013

Notice some people are asking for the mw config screen details


Note this did enlighten me to the fact that I didnt have a apc of xcache enabled, I've since enabled apc which seems to have removed the warning but still whiter than white... :<, 30 October 2013

What do you mean with When I try and run the extension php file?

The extensions PHP files aren't meant to be run. They extend MediaWiki Functionality but shouldn't be accessed from the web server directly.

I've edited the image's talk page, put the following code, and hit "show preview", and it seems to work as expected:

File:Mw config.png
rect 0 0 200 200 [[Main Page|Go to main page]]
Ciencia Al Poder (talk)10:27, 31 October 2013

Imagemap Area highlight script

You may want to look at the 100-line script here: w:he:Mediawiki:Imagemap-Highlight.js, which cause an imageMap that is packed inside an element (e.g. div) with the class imageMapHighlighter, to create a list of all the titles below the image, and the areas theselves become visible ("highlighted") when you float the mouse above the specific area, or above the appropriate list-item. to see a demonstration, look in w:he:Template:מפת תמונה/דוגמאות. (does work on all browsers except IE version 8 and below). peace

- קיפודנח1 06:54January 2012 (UTC)13:27, 21 January 2012

Wow! that's a very useful script! Thanks for sharing ;)

Ciencia Al Poder17:03, 12 February 2012

if you use it on any other wiki (wikimedia wiki or other), i will appreciate it if you'll let me know. peace.

קיפודנחש21:16, 12 February 2012

Hello Everyone I am trying to use this script but I do not understand how to integrate it, I copied the script and created the page with the code in naming it as the script to use it but now what do I do? sorry for my english I'm Italian and use google translate to write in English, 9 June 2012

in order to use this script, you need to include it (either through "gadgets" or "common.js"), and then you need to embed the imagemap tag inside a "div" element which has the class "imageMapHighlighter". see the example below:

<div class="imageMapHighlighter">
poly 1 2 3 4 5 6 [[article 1]]
rect 7 8 9 10 [[article2|tooltip for article 2]]
circle 3 4 5 [http://example.com?some_page  tooltip for external link]

if you need more help, the best place to contact me is on w:he:user talk:קיפודנחש. unfortunately, i can't communicate in Italian - but hebrew or english are just fine.


קיפודנחש (talk)16:47, 9 June 2012

Hello, thanks for your reply, I tried to do as you wrote, but nothing happens the result is the same as before imagemap normal, maybe I did something wrong, I copied your script and created Mediawiki:Imagemap-Hightlight.js and add-in Mediawiki: Commons.js importScript ('MediaWiki:Imagemap-Hightlight.js'); Sorry I am new and maybe my questions seem stupid to you but I want to use your script and I'm trying to figure out how, if you help me I'm grateful, thanks, 9 June 2012


Thanks for this very useful plugin!

I was wondering why it doesn't work on Internet Explorer 8. I am working on a project and unfortunately the users can only use Internet Explorer 8 which is quite a problem.

Is it possible to know what is the thing that keeps IE8 away from the compatibility list? Can I do something on my side to be able to use it on IE8?

Thank you for your answers.

Nevermindz (talk)09:50, 15 May 2013
Edited by author.
Last edit: 16:05, 15 May 2013

this tool uses a feature that was non-standard for a long time, but supported by most browsers and eventually made its way to html5, which is called "canvas".

microsoft had similar functionality for IE, but it uses different semantics. there is a tool (i.e., a javascript library) made public by google that emulates "canvas" functionality and under the hood translate it to the explorer semantics. i was not able to make this tool work with my script (or rather, i was not able to make my script work with this tool), but i have strong suspicion that it's possible. the tool is called "explorercanvas" or "excanvas". this is the "project home" for excanvas on google: [1]

luckily, html5 becomes more and more of a standard, and explorer 9 and 10 now support the standard "canvas", and hence my script.

if anyone wants to take a shot at teaching this script to work with excanvas i will be very grateful.


קיפודנחש (talk)12:49, 15 May 2013

Thank you for your quick answer. :)

Nevermindz (talk)13:59, 15 May 2013

Why is the icon so different from the thumb icon?

Why is the icon a blue "i"? This is sooo different from the default double-rectangle thumb icon. There is currently a discussion in the German Wikipedia and I remember several earlier discussions. All users consider the blue "i" confusing. Why can't it be more similar to the default icon? Or a magnifying glass icon with a white outline? This would be very helpful, especially if an SVG map is shown in a smaller size and the user wants to enlarge it.

TMg20:04, 13 November 2012

It would be great if this couple be disabled completely via the MW link= parameter. I guess this extension was written before this parameter was added to images :)


Mitchelln (talk)10:05, 18 February 2013

actually, the link to the original image can easily be suppressed (as documented in the extension page) by adding the parameter

| desc none

(other possible values are "bottom-right" which is the default, "bottom-left", "top-right" and "top-left"). note that image copyright and good citizenship requires that a link to the original image will exist somewhere. this hold in wikis that adhere to CC-BY-SA, but may not be required in other wikis.


קיפודנחש (talk)21:55, 18 February 2013
Alternative icons

This doesn't answer my question. Can we please change the (in my opinion) confusing blue "i" with something that looks like the default thumbnail icon or a magnifying glass?

TMg11:53, 5 March 2013

Third link keeps messing up, slow to load

I have this piece of code on my site @ http://www.koreanwikiproject.com/wiki : <imagemap> Image:Main_page_pic.png|center rect 7 39 368 89 [[Learn_Hangeul]] rect 27 107 363 157 [[Contributing]] rect 52 173 554 223 [[Translations]] rect 77 242 356 292 [[Flashcards]] rect 103 307 300 357 [[Quizzes]] rect 132 374 353 424 [http://www.facebook.com/koreanwikiproject] rect 188 441 385 491 [http://www.youtube.com/koreanwikiproject] </imagemap>

For some reason, when I hover over the link for Translation, it makes it the previous link, then all the links afterwards are messed up as well. Hovering over the links makes the loading animation too and it takes a really long time. Can anyone help please? Thanks

Bluesoju (talk)02:15, 11 December 2012

Nevermind. The problem was the image map software kept loading an older image (which was bigger) and kept mapping coordinates that didn't exist.

Bluesoju (talk)02:31, 11 December 2012

External link in other windows

Hello, Is it possible open the external link in other windows? target="blank" thank you, 9 April 2012

See Manual:$wgExternalLinkTarget. Cheers

[[kgh]] (talk)17:17, 9 April 2012

It doesn't work on MW 1.16.2. Normal link open in new window, imagemap link do not., 12 November 2012

That's a bug on Extension:ImageMap, then. You can report a bug about that.

Ciencia Al Poder (talk)20:16, 12 November 2012

i believe that if "they" will ever choose to fix bugzilla:36175, with very high probability this problem will be solved also.

if you want to lobby for such a fix, i will be very happy.


קיפודנחש (talk)22:49, 12 November 2012

Use ImageMap with Inline Linking that is ImageMap on images not uploaded to wiki

The following code works but if I change the image name to a url then it doesn't work.
rect 1 1 100 100 [[The Visual Stimulus|What is Visual Stimulus?]]
desc none

If I change image name to a url like

rect 1 1 100 100 [[The Visual Stimulus|What is Visual Stimulus]]
desc none

it says, Error: image is invalid or non-existent

I am using wiki on a stick and I have a directory where the image is stored. The URL works in browser window.

May be I am not using the right syntax. I have tried a bunch of syntax but unsuccessful. Please help in this regard. Thank you very much.

Samsun137 (talk)09:13, 4 November 2012

The image should be uploaded to the wiki. External images aren't allowed AFAIK, so the external URL syntax won't work. What's the problem with the first example you posted?

Ciencia Al Poder (talk)11:56, 4 November 2012

Thanks for your reply Ciencia. The first example works fine. But on the ImageMap extension link
it says that you can use external images, which I would like to use. But the link doesn't show any syntax.

Samsun137 (talk)16:30, 4 November 2012

Oh, I think you got it wrong. That's for external links, not images.

So, in your example, you could use [http://localhost:8080/wiki/The_Visual_Stimulus What is Visual Stimulus?] as the link instead of [[The Visual Stimulus|What is Visual Stimulus?]].

Ciencia Al Poder (talk)17:20, 4 November 2012

Ok I see ... Thanks.

Samsun137 (talk)18:56, 4 November 2012

Need to distinguish "red" links from "blue" links (and add external, while you're at it)

One deficiency with imagemap is that there is no way for the user (or a script) to know if the page of this link actually exists. It would be very useful to have this available. IMO, this can be accomplished with zero regressions by adding "external" or "new" classes to this area element (you already create a "$title" object, so it should be very easy to do by adding (around line #229)

	if ($external) {
		$attrib['class'] = 'external';
	} elseif (! $title->exists()) {
		$attribs['class'] = 'new';

or somesuch (totally untested, but very simple).

קיפודנחש 06:54, 11 January 2012 (UTC)13:25, 21 January 2012

Please request such features on bugzilla:

Ciencia Al Poder (talk)18:12, 22 April 2012

is there a bugzilla topic for this extension? for all extensions? how are extensions managed via bugzilla?


קיפודנחש (talk)13:16, 23 April 2012

There is a component ImageMap on bugzilla. Besides, the infobox at Extension:ImageMap has links to open bugs and feature requests related to this extension.

Helder13:26, 23 April 2012

Text Wrapping

Edited by another user.
Last edit: 20:50, 29 March 2012

Here is an example of my code. I am using the latest of MW 1.18.1 and the imagemap extension. No matter what I do, use all internal links or external links, I get text wrapping around the graphic. If I put enough
in I can get the page to flow correctly. Is there something wrong with my code or does the graphic automatically become an inline graphic?

Thank you!

Margaret Lee

rect 241 7 332 68 [[Identify Legacy Inputs]]
rect 320 98 440 158 [http://myserver.company.com/xxx Legacy Inputs]
rect 493 94 604 139 [http://myserver.company.com/xxx Design Input Requirements]
</imagemap>, 29 March 2012

Note that you are using "left|thumb" on the image parameters. Try to remove them, or change "left" for "center" or "none" to see if that helps.

Ciencia Al Poder (talk)18:07, 22 April 2012