Extension talk:ImageMap

Jump to: navigation, search

About this board


previous talk on this page

Squeak24 (talkcontribs)

I am trying to get imagemaps to work on a server that is not connected to the internet, but I keep getting the error:

Warning: md5_file(D:\wamp64\www/): failed to open stream: No such file or directory in D:\wamp64\www\includes\OutputPage.php on line 3802

Warning: OutputPage::transformFilePath: Failed to hash D:\wamp64\www/ [Called from OutputPage::transformFilePath in D:\wamp64\www\includes\OutputPage.php at line 3804] in D:\wamp64\www\includes\debug\MWDebug.php on line 309

The imagemap works, but I keep getting the warning.

I have installed both Python and ImageMagick on the volume "D:\" rather than C:\. I have tried to install MagickWand but I keep getting an error:

Could not find a version that satisfies the requirement setup,py <from versions: >

no matching distribution found for setup.py

I have successfully got it working on two development servers that are connected to the Internet, do get the pre-requisites installed do I need to be connected to the Internet? If so, could it be possible to transfer the programs onto the non-Internet machine from one of my development servers?

Any help would be appreciated.

Ciencia Al Poder (talkcontribs)

python is not used by this extension, nor any other extensions that I'm aware of, and ImageMagick is all you may need for thumbnails, not MagicWand.

If you disable ImageMap, does the warning still appear? Apparently, something is passing an empty file path to OutputPage::transformFilePath, causing the warning.

A debug log with a complete backtrace of the error would be useful. See Manual:How to debug

Reply to "Error with imagemap and MD5"

Why is the icon so different from the thumb icon?

TMg (talkcontribs)

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.

Mitchelln (talkcontribs)

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 :)


קיפודנחש (talkcontribs)

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.


TMg (talkcontribs)
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?

Krabina (talkcontribs)

I agree: I also thinkg the "i" should not be there, but the standard icon for thumbnails should be used.

TMg (talkcontribs)

@Volker E. (WMF), are you aware of plans to change this icon as part of the UI standardization process?

Volker E. (WMF) (talkcontribs)

@TMg Hi, we're currently in the process of gathering feedback on a general overhaul and alignment of our WikimediaUI icon set to the icon guidelines in our style guide at https://phabricator.wikimedia.org/M229.

When we are in agreement and addressed all feedback we will amend the icons in all of Wikimedia Foundation products step by step. This is currently estimated as several months process, rolling out to MediaWiki core, MobileFrontend or VisualEditor first.

In the long run the new icon set should also be applied to extensions like ImageMap. In order not to loose this out of focus, I'd suggest filing a task on Phabricator about it.

Reply to "Why is the icon so different from the thumb icon?"
Kghbln (talkcontribs)

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

This post was posted by Kghbln, but signed as קיפודנחש.

Ciencia Al Poder (talkcontribs)

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

קיפודנחש (talkcontribs)

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

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

קיפודנחש (talkcontribs)

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.

peace. (talkcontribs)

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

קיפודנחש (talkcontribs)

i think that from here it would be more appropriate to continue on your wiki, if you want to tell me where is it (i.e., post the address of your wiki, presuming i can open a user there). (talkcontribs)

wonderful it would be just that my mediawiki is private where I can give you the link to see if you can help me to run your script?

קיפודנחש (talkcontribs)

register here and send me an email.

Vendere (talkcontribs)

Hello I would like to send an email but when I click on you becomes all in Hebrew and not understand anything :)

FreedomFighterSparrow (talkcontribs)
CoolCornucopia (talkcontribs)

Hi, I would like to use the nice script you wrote for highlighting image maps... so, first of all, thank you for having shared your script :-)

As Vendere, I have created Mediawiki:Imagemap-Hightlight.js with the related source code + have added importScript('MediaWiki:Imagemap-Hightlight.js'); in MediaWiki:Common.js ... and I can see the link titles below the image, I can use the mouse to click maps on the image... but no nice yellow-highlighted maps on the image :-(

Using firebug, I have the following error when "mouseovering" the links below the image (but no error msg when "mouseovering" the image maps): "TypeError: events is undefined"

Any idea? (MediaWiki 1.17, with the related ImageMap extension). Many thanks & Best regards,

This post was posted by CoolCornucopia, but signed as Cornucopia.

קיפודנחש (talkcontribs)

so this script uses jQuery to handle the events, and 1.17 uses an older version of jQuery (1.4.2), which i never tested with this script.

i do not have access to a 1.17 wiki, and it may take me a while to set it up. it will be more efficient if you can post a link to your wiki instead.


CoolCornucopia (talkcontribs)

Many thanks for your reply. Unfortunately, my wiki is not public. I do agree with your analysis, the issue seems to come from the jquery version. I have in mind to move to the recent mediawiki version. Before this, I will do investigations on my mediawiki 1.17 version and I will try to fix the issue linked to the jquery version.

Once again, many thanks for your support and nice script, Best regards : )

This post was posted by CoolCornucopia, but signed as Cornucopia.

CoolCornucopia (talkcontribs)

Here is the patch that works fine on my MediaWiki 1.17 (jQuery 1.4.2). The issue was linked to jQuery .data calls (see http://api.jquery.com/data/ for more details).

@@ -39,15 +39,15 @@
 	function mouseAction(e) {
 		var $this = $(this),
-			context = $this.data('context');
+			context = $this.data('mydata').context;
 		var activate = e.type == 'mouseover';
 		$this.toggleClass(liHighlightClass, activate);
 		context.clearRect(0, 0, context.canvas.width, context.canvas.height);
 		if (activate) {
-			drawMarker(context, $this.data('areas'));
+			drawMarker(context, $this.data('mydata').areas);
 			if ($.client.profile().name === 'msie') {	// ie9: dimwit needs to be told twice.
 				context.clearRect(0, 0, context.canvas.width, context.canvas.height);
-				drawMarker(context, $this.data('areas'));
+				drawMarker(context, $this.data('mydata').areas);
@@ -102,10 +102,10 @@
 					lis[text] = li = $('<li>', {'class': myClassName})
 						.append($('<a>', {href: href, title: pageOfHref(href, cssClass), text: text, 'class': cssClass})) 
 						.bind('mouseover mouseout', mouseAction)
-						.data({areas: [], context: context});
+						.data('mydata', {areas: [], context: context});
-				li.data('areas').push(this);	//add the area to the li
+				li.data('mydata').areas.push(this);	//add the area to the li
 				$(this).bind('mouseover mouseout', function(e) {li.trigger(e);})

This post was posted by CoolCornucopia, but signed as Cornucopia.

קיפודנחש (talkcontribs)

Thanks! you did a great job understanding and fixing the problem. however, i would prefer a little more straightforward fix, which i believe would be enough to fix this pre-jquery-1.4.3 bug. would you be willing to verify that this really solves the problem? again, many thanks!

@@ -102,10 +102,10 @@
 					lis[text] = li = $('<li>', {'class': myClassName})
 						.append($('<a>', {href: href, title: pageOfHref(href, cssClass), text: text, 'class': cssClass})) 
 						.bind('mouseover mouseout', mouseAction)
-						.data({areas: [], context: context});
+						.data('areas', [])
+						.data('context', context);

thanks again, peace.

CoolCornucopia (talkcontribs)

Your last patch works perfectly and is more elegant than mine :) Many thanks for your support.

Note: I plan to slightly modify your source code to highlight all areas in grey when the image is loaded so it helps users to know where are the inter-active areas without searching them by using the mouse everywhere on the image (of course, yellow-highlighted areas are still there) because some users prefer searching areas on the image instead of using titles below the image... I will keep you in touch : )

Best regards

This post was posted by CoolCornucopia, but signed as Cornucopia.

קיפודנחש (talkcontribs)

interesting. you might want to do this by inserting an additional "li" element before the first one, with action, e.g., "toggle highlighting for all areas".

if you do this, i suggest setting the "ol" property "start" to 0 (methinks it's 1 be default), so this special "li" element will be numbered 0, thus not distupting the "natural" order of the real areass in the list.

this will introduce a small issue of i18n support - so far i kept the script (almost) completely innocent of any language string (the only language string is used to show redlinks, but imagemap extension does not support redlinks yet anyway - see Bugzilla:36175, so this is never used)

thanks again for testing this - i updated the script on hewiki to fix the 1.4.2 problem.


CoolCornucopia (talkcontribs)

Hi, in the source code below, I have added an extra function mouseActionAll() to show all the areas in grey when the mouse "enters" on the image. I have also replaced mouseover/out with mouseenter/leave to reduce the number of events :-)

@@ -9,2 +9,3 @@
 		areaHighLighting = {fillStyle: 'rgba(0,0,0,0.35)', strokeStyle: 'yellow', lineJoin: 'round', lineWidth: 2},
+		areaHighLightingAll = {fillStyle: 'rgba(0,0,0,0.35)', strokeStyle: 'white', lineJoin: 'round', lineWidth: 2},
 //every imagemap that wants highlighting, should reside in a div of this 'class':
@@ -42,3 +43,4 @@
 			context = $this.data('context');
-		var activate = e.type == 'mouseover';
+		$.extend(context, areaHighLighting);
+		var activate = e.type == 'mouseenter';
 		$this.toggleClass(liHighlightClass, activate);
@@ -54,2 +56,18 @@
+	function mouseActionAll(e) {
+		var $this = $(this),
+			context = $this.data('context'),
+			map = $this.data('map');
+		$.extend(context, areaHighLightingAll);
+		if (e.type == 'mouseenter') {
+			$('area', map).each(function() {
+				var $this = $(this), text = this.title, areas = new Array();
+				areas.push(this);
+				drawMarker(context, areas);
+			});
+		} else {
+			context.clearRect(0, 0, context.canvas.width, context.canvas.height);
+		}
+	}
 	// massage the area "href" and create a human legible string to be used as the tooltip of "li"
@@ -103,3 +121,3 @@
 						.append($('<a>', {href: href, title: pageOfHref(href, cssClass), text: text, 'class': cssClass})) 
-						.bind('mouseover mouseout', mouseAction)
+						.bind('mouseenter mouseleave', mouseAction)
 						.data('areas', [])
@@ -109,4 +127,7 @@
 				li.data('areas').push(this);	//add the area to the li
-				$(this).bind('mouseover mouseout', function(e) {li.trigger(e);})
+				$(this).bind('mouseenter mouseleave', function(e) {li.trigger(e);})
+			$(this).bind('mouseenter mouseleave', mouseActionAll)
+				.data('context', context)
+				.data('map', map);

best regards

This post was posted by CoolCornucopia, but signed as Cornucopia.

קיפודנחש (talkcontribs)

i did not quite understand the rationale behind replacing "over/out" events with "enter/leave". i have no specific preference for over/out, and do not mind the change, i just do not understand it. in your comment you wrote this reduces the # of events. care to elaborate?

as to the patch itself: here is an alternative implementation, that does it the way i described, i.e. by prepending a "0" li element to the list to trigger (via "hover") highlighting all the areas.

if i would to implement this feature i think i would do it my way - showing all the areas when one enters the image seems wrong to me.

i will be happy to hear what others think.

the patch adds one more language string, so it "bites the bullet" and create a whole new "initMessages" function. it also add one more call to "context.clearRect", so it adds yet another function for this also.

let me know what you think.


@@ -10,11 +10,19 @@
 //every imagemap that wants highlighting, should reside in a div of this 'class':
 		hilightDivMarker = '.imageMapHighlighter',
 // specifically for wikis - redlinks tooltip adds this message
-		pageDoesntExistMessage = (mw && mw.config && mw.config.get('wgUserLanguage') == 'he')
-			? ' (הדף אינו קיים)'
-			: ' (page does not exist)';
+		pageDoesntExistMessage,
+		showAllMessage;
+	function initMessage() {
+		if (mw && mw.config && mw.config.get('wgUserLanguage') == 'he') {
+			pageDoesntExistMessage = ' (הדף אינו קיים)';
+			showAllText = 'הראה את כל האזורים';
+		} else {
+			pageDoesntExistMessage = ' (page does not exist)';
+			showAllText = 'Show all areas';
+		}
+	}
 	function drawMarker(context, areas) { // this is where the magic is done.
 		function drawPoly(coords) {
@@ -36,17 +44,22 @@
+	function clear(context) {
+		if (context)
+			context.clearRect(0, 0, context.canvas.width, context.canvas.height);
+	}
 	function mouseAction(e) {
 		var $this = $(this),
 			context = $this.data('context');
 		var activate = e.type == 'mouseover';
 		$this.toggleClass(liHighlightClass, activate);
-		context.clearRect(0, 0, context.canvas.width, context.canvas.height);
+		clear(context);
 		if (activate) {
 			drawMarker(context, $this.data('areas'));
 			if ($.client.profile().name === 'msie') {	// ie9: dimwit needs to be told twice.
-				context.clearRect(0, 0, context.canvas.width, context.canvas.height);
+				clear(context);
 				drawMarker(context, $this.data('areas'));
@@ -109,6 +122,17 @@
 				li.data('areas').push(this);	//add the area to the li
 				$(this).bind('mouseover mouseout', function(e) {li.trigger(e);})
+			ol.prop({start: 0})
+				.prepend($('<li>', {'class': myClassName, text: showAllText})
+					.hover(
+						function() {
+							ol.find('li:not(:first-child)').each(function() {
+								drawMarker($(this).data('context'), $(this).data('areas'))
+							});
+						}, 
+						function() {clear(ol.find('li:eq(1)').data('context'));}
+					)
+				);
CoolCornucopia (talkcontribs)

Hi : ) I have replaced mouseover vs. mouseenter after the reading of this jQuery article, I though it was "better". Following your last comments, I have added counters in the two functions drawMarker() & mouseAction() and you are right, there is no difference (same number of events) between over and enter so I will go back to over/out : )

Let's me describe more my use case: Imagine a image like this one where there are only 2 or 3 "areas" (no information "yet" for the others). When the user mouse enters on the image, the user will have to find where are the "areas" before clicking on them. I like your implementation based on the "show all" message, but my wiki users seem to prefer to navigate on the image instead of in the list (note: I need to get more user feedbacks to consolidate that pov)...

I do agree with you that "show all areas when mouseovering the image" is really not nice with an image containing many areas (especially with overlapped areas) like a country geographic map or the eye image you have as example.

My idea (at least for my wiki ;-) : As this highlight feature is really dependant on the kind of image and their related areas, I plan to offer to users the possibility to enable/disable the "show all areas when mouseovering the image" feature, using for instance a parameter somewhere in <div class="imageMapHighlighter">...

What is your opinion? Best regards :-)

This post was posted by CoolCornucopia, but signed as Cornucopia.

קיפודנחש (talkcontribs)

i see. thanks.

one can argue this (enter/leave vs. over/out) both ways, but it turns out in this case it is not really relevant (the link talks about elements containing other elements - not the case here).

i did understand the rationale behind wantint to have a way to highlight all the areas, i just did not think binding this to the "enter" event of the image itself is the right thing to do, and my patch demonstrates a way to do this by introducing a "0" elemnt to the list for the same purpose.


Nevermindz (talkcontribs)


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.

קיפודנחש (talkcontribs)

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:

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.


WikiGremlin Dave (talkcontribs)

This is a great add on. One question, Is there a why to invert the "fill" of the highlight? So the rest of the image gets darker while the area of focus stays bright and outlined?

Would help the area of focus pop out a little better.

Its just a thought

קיפודנחש (talkcontribs)

You can change the way the highlighted area is displayed, using the "areaHighLighting" variable at the top. For instance, if you want to show the area lighter instead of darker, you can try

fillStyle: 'rgba(255,255,255,0.2)'

or something (you can play with different values). basically, the first 3 numbers are "rgb" values, and the 4th is "opacity", where 0 means fully transparent, and 1 means completely opaque.
similarly, you can change the characteristics of the outline by modifying strokeStyle, and lineWidth (all those are html5 "canvas" properties).

however, changing the display of everything *except* the selected region, if it's at all possible, will require changes to the code.


WikiGremlin Dave (talkcontribs)

Ive adjusted that, I was just wondering if there was a way to make the rest of the image darker, leaving the "highlighted" area its original brightness. Im not very good with JS

Krabina (talkcontribs)

I use your great script, too. I upgraded from MW 1.23 to MW 1.27 and it is not highligting anymore. I get the following message in Debugger:

ReferenceError: appendCSS is not defined
init .../imagemapedit/Imagemap-Highlight.js:76:3
fire .../load.php:45:104
fireWith .../load.php:46:431
using .../load.php:171:117
<anonym> .../imagemapedit/Imagemap-Highlight.js:163:3
fire .../load.php:45:104
add .../load.php:45:656
jQuery.fn.ready .../load.php:49:40
<anonym> .../imagemapedit/Imagemap-Highlight.js:1:1
Krabina (talkcontribs)
קיפודנחש (talkcontribs)

Thanks. I updated the script, to use mediawiki.util and call mw.util.addCSS instead of appendCSS which went away with bits some time ago. Peace.

Krabina (talkcontribs)

I found another problem. When you use "thumb" after the image name, a missing </a> results in the next heading to have a problem. You can see it here: http://standards.kdz.eu/index.php?title=ImageMapTest

The header "Test" after the image is displayed, but then the "edit" button shows the problem ("Bearbeiten" in German). This does not happen when you remove the "|thumb" from the image.

the resulting HTML is

<div class="magnify"><a href="/index.php?title=Datei:WStLA_KS_Sammelbestand_P1_6.jpg" class="internal" title="vergr&#xf6;&#xdf;ern"/></div>

but should be

<div class="magnify"><a href="/index.php?title=Datei:WStLA_KS_Sammelbestand_P1_6.jpg" class="internal" title="vergr&amp;amp;amp;#xf6;&amp;amp;amp;#xdf;ern"/></a></div>
קיפודנחש (talkcontribs)

sorry, i could not understand the problem. before i try to dive in, a question: if you do not use the "highlight" script at all (either by not wrapping the imagemap inside an "imagehighlight" div, or simply by disabling the script on your site temporarily), does it behave as expected, or does it still have the problem?

if it turned out the "highlight" script is the culprit, i should try to understand the problem, and why the highlight script is causing it. if the problem still occurs without the script, you probably want to repeat the question in a new topic, to take it with the "imagemap" extension directly (this topic is about "Imagemap Area highlight script"). peace.

Krabina (talkcontribs)

if you remove the div triggering the highlight script, everything works as expected...

Krabina (talkcontribs)

to make sure I just tested it with the vector skin to make sure it does not have anything to do with the skin. But it does not make a difference...

קיפודנחש (talkcontribs)

so i looked at your test page. i did see some problem, but i am not sure if it matches what you describe. i did not see the problematic html you describe (note: i am not registered on the site, and there is no "edit" link after h2 - you do not allow anon edits....)

i did see something that looks problematic: the Test h2 title is _inside_ an <a> element, which should not happen: the wikicode does not suggest anything like this.

i do not believe this has anything to do with the highlight script: indeed, i disabled JS on my browser, and the same issue manifested, even though the script clearly did not run.

so there is some problem on the site, that manifests when using imagemap with thumb (possibly enclosing the imagemap in a div exposes this issue), but it's not related to any specific script, as evident from the fact the problem manifests with JS disabled on the browser.

so maybe, the issue is not the script, but simply embedding the imagemap inside a div. i suggest you repeat the experiment, but instead of removing the div, just pervert it a little (e.g., by modifying the class name).

as a side, i noticed this message on the console (with JS enabled, of course):

Failed to execute 'write' on 'Document': It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened.

can't say for sure, but i believe this is a result of "document.write()" call you perform from your mediawiki:common.js

i think you want to execute the piece that calls document.write from a function that runs after the document finished loading, rather than immediately (IOW, enclose it inside

$(function() {  // $(function(){}) is jquery shortcut to $(document).ready(function(){})
// put here the code that calls document.write


Krabina (talkcontribs)

Thank you! It obviously has to do with the imagemap extension, obviously, not with your script. Removing the div does not help by the way. I also removed all the js calls in mediawiki:common.js, but that did not change anything, either.

Reply to "Imagemap Area highlight script" (talkcontribs)

The mapped links don't appear to work with Extension:Popups, is that intentional? I need popups for exactly this purpose.

Lyrixn (talkcontribs)

No one knows?

Reply to "Hovercards"
Ian Glossop (talkcontribs)

I wanted to use Visio to create image maps for use in media-wiki for several reasons including:

1) As a long-term Visio user (since before Microsoft acquired the software), it is much faster for me to generate diagrams than using other tools.

2) I know Visio allows you to associate hyperlinks with shapes on the diagram and can automatically produce an imagemap when saved as a Web Page - and can save the web page images as PNG files as well as SVGs (or others)

3) I didn't want to spend hours either learning a new tool or in 'manual editing' of image maps using one of the imagemap editing tools out there.

Of course the Visio "Web Page" imagemap format has only vague resemblance to the MW imagemap and is buried in a structure of HTML files with lots of "junk" javascript. The tiny useful bit (when you find it) has the following format:

<center> <IMG id="ConvertedImage" SRC="png_1.png" ALT="Page-1" name=RasterImage BORDER="0" USEMAP="#visImageMap"> <MAP NAME="visImageMap"> <AREA shape="POLYGON" tabindex="1" ALT="Strategy / ies" origTitle="Strategy / ies" TITLE="Strategy / ies" HREF="../%5B%5BStrategy%20%5C%20ies%5D%5D" target="_top" COORDS="440,643,415,643,275,643,275,694,415,694,440,694,483,694,483,643,440,643" onmouseover="UpdateTooltip(this,0,23,event)" onfocus="UpdateTooltip(this,0,23,event)" onclick="return OnShapeClick(0,23,event);" onkeyup="OnShapeKey(0,23,event);"> <AREA shape="POLYGON" tabindex="1" ALT="Information" origTitle="Information" TITLE="Information" HREF="../%5B%5BInformation%5D%5D" target="_top" COORDS="286,588,286,639,483,639,483,588,286,588" onmouseover="UpdateTooltip(this,0,22,event)" onfocus="UpdateTooltip(this,0,22,event)" onclick="return OnShapeClick(0,22,event);" onkeyup="OnShapeKey(0,22,event);"> <AREA shape="POLYGON" tabindex="1" ALT="" origTitle="" TITLE="" HREF="../%5B%5BEnterprise%20Strategic%20Context%5D%5D" target="_top" COORDS="87,436,88,456,90,477,94,497,99,517,105,537,113,556,122,574,133,592,145,609,158,625,172,640,187,654,203,667,220,678,237,689,256,698,275,706,294,713,314,718,335,721,355,724,376,724,396,724,417,721,437,718,457,713,477,706,496,698,514,689,532,678,549,667,565,654,580,640,594,625,607,609,618,592,629,574,638,556,646,537,653,517,658,497,661,477,664,456,664,436,664,415,661,395,658,374,653,354,646,335,638,316,629,297,618,280,607,263,594,247,580,232,565,218,549,205,532,193,514,182,496,173,477,165,457,159,437,154,417,150,396,148,376,147,355,148,335,150,314,154,294,159,275,165,256,173,237,182,220,193,203,205,187,218,172,232,158,247,145,263,133,280,122,297,113,316,105,335,99,354,94,374,90,395,88,415,87,436" onmouseover="UpdateTooltip(this,0,2,event)" onfocus="UpdateTooltip(this,0,2,event)" onclick="return OnShapeClick(0,2,event);" onkeyup="OnShapeKey(0,2,event);"> <!----snip ----> <AREA shape="POLYGON" tabindex="1" ALT="" origTitle="" TITLE="" HREF="../%5B%5BEnterprise%20Ecosystem%5D%5D" target="_top" COORDS="0,768,742,768,742,0,0,0,0,768" onmouseover="UpdateTooltip(this,0,3,event)" onfocus="UpdateTooltip(this,0,3,event)" onclick="return OnShapeClick(0,3,event);" onkeyup="OnShapeKey(0,3,event);"> </MAP>

So I wrote the following perl filter script, VisImageMap_to_MWImageMap.pl, to filter it down to the Mediawiki format:

#!/usr/bin/perl # # # *nix CLI Usage: VisImageMap_to_MWImageMap.pl < {Input_Filename} > {Output_Filename} # # The input file is a Visio image map - a html file associated with an image and the # output is a 'wikitext' image map designed to be pasted into a media-wiki page. The input # file is found in the "*_files" folder when the Visio diagram is saved as a web page. # This script assumes that mediawiki style hyperlinks have been associated with the diagram # shapes in the Visio diagram in the usual way - and these will be the 'diagram links' # in the wiki ImageMap. They can, of course, be edited afterwards. # # Todo: the filter doesn't place the correct image filename in the output ImageMap text - but # defaults to "UNDEFINED". It needs to take the filename as a parameter (option) - or take the # output filename (preferably the first so that it can be invked from another script). # # # Requires: perl - in the above location. # # Modification History # ==================== # When Version Who Comment # -------------------------------------------------------------------------------------------- # Feb 2017 1.0 Ian Glossop First version - developed on Qnap / Ubuntu # # -------------------------------------------------------------------------------------------- # # my $img_filename = 'UNDEFINED'; my $img_position = 'center'; my $img_width = '400'; my $img_alt_text = 'UNDEFINED'; my $poly_count = 0; while ( <> ) { #print; /\<IMG id=.ConvertedImage. SRC=.(png_1.png). ALT=.Page-1. name=RasterImage BORDER=.0. USEMAP=.#visImageMap..*\>/ && do { $img_filename = $1; print( "<imagemap>\n" ); }; /\<MAP NAME=.visImageMap.\>/ && do { print( " " ); print( "Image:$img_filename\|" ); print( "$img_position\|" ); print( "$img_width\|" ); print( "alt=$img_alt_text\n" ); }; #/\<AREA shape=.POLYGON. .*\>/ && do { }; #/\<AREA shape=.POLYGON. tabindex=.\d*. ALT=.(.+). origTitle=.(.+). TITLE=.(.+). .*\>/ && do { # }; /\<AREA shape=.POLYGON. tabindex=.\d*. ALT=.(.*). origTitle=.(.*). TITLE=.(.*). HREF=.(.+)%5B%5B(.+)%5D%5D. target=.(.+). COORDS=.(.+). onmouseover=..+. onfocus=..+. .*onclick=.return OnShapeClick\(.+\)\;. onkeyup=.OnShapeKey\(.+\)\;..*\>/ && do { #print; $poly_count++; my $poly_alt_text = $1; my $poly_orig_title = $2; my $poly_title = $3; my $poly_link_local_path = $4; my $poly_hyperlink = $5; my $poly_target_loc = $6; my $poly_coords = $7; $poly_coords =~ s/,/ /g; # Visio uses comma-separated coords, whereas media-wiki uses i # space-separated. Both programs are of course 'wrong' - anyone # who has studied mathematics knows that 2D rectilinear coordinates # come in pairs that are by convention x-coord first, y-coord second # with each pair being comma-separated and lists being space-separated. # Change HTML-encoded spaces back to real spaces $poly_hyperlink =~ s/%20/ /g; $poly_title =~ s/%20/ /g; print( " poly $poly_coords [[$poly_hyperlink|$poly_title]] \n" ); }; /\<\/MAP\>/ && do { print( "</imagemap>\n\n" ); # print( "\n\n\n Found $poly_count polys\n" ); }; }

Then to make life a little easier in getting the images and the maps out of the morass of htm, css and js files that Visio produces, I wrote the following shell script, Convert_Visio_to_Mediawiki_ImageMap.sh:

#!/bin/sh # # Usage - see help (-h) option below. # # This script creates a media-wiki ImageMap (image and wikitext) givin a hyperlinked Visio # diagram saved as a web page with the image format set to PNG. It attaches a version number # to both the wikitext and the corresponding image. The pair of output files - a PNG file # containing the image and a wikitext file containing the wikitext ImageMap are placed # in a corresponding folder defined by the Visio filename appended with the $OP_FOLDER # parameter. # # Requires: (a Bash-like shell accessible as /bin/sh) - as such shells vary so may the # behaviour of this script. It should be rewritten for a standard POSIX (/bin/ksh) shell - # but linux enthusiasts seem to prefer non-standard so Bash is much more common. # Requires also the perl ImgMapFilter - which does the hard work. # # Modification History # ==================== # When Who Version Comment # -------------------------------------------------------------------------------------------- # Feb 2017 Ian Glossop 1.0 First version - quickly 'knocked up'. # -------------------------------------------------------------------------------------------- export input_file='UNDEFINED' export OUTPUT_DIR='UNDEFINED' export OP_FOLDER="_wikimap" export VS_FOLDER="_files" export ImgMapFilterPath="." export ImgMapFilter="VisImageMap_to_MWImageMap.pl" export Version_no='UNDEFINED' args=$# while getopts ":h:v" opt; do case $opt in h) echo "Usage: Convert_Visio_to_Mediawiki_ImageMap.sh [-h] [-v {Version_Number}] {Source_Visio_file}.htm" exit ;; v) Version_no="$2" args=$(($args-2)) shift shift ;; esac done #shift "$((OPTIND-1))" #echo $0 #echo $# input_file="$1" echo "$input_file" if [[ $input_file == "" ]]; then echo "Error - you must specify an input filename" 2>&1 echo "Usage: Convert_Visio_to_Mediawiki_ImageMap.sh [-h] [-v {Version_Number}] {Source_Visio_file}.htm" exit 1 fi if [[ $args > 1 ]]; then echo "Error - this script takes only one parameter: the input filename. If your filename has spaces in it don't forget to put it in quotes." 2>&1 echo "Usage: Convert_Visio_to_Mediawiki_ImageMap.sh [-h] [-v {Version_Number}] {Source_Visio_file}.htm" exit 1 fi file=$(basename $input_file) dir=$(dirname $input_file) folder=$(echo $file | cut -d'.' -f1) extn=$(echo $file | cut -d'.' -f2) vs_folder="$dir/$folder$VS_FOLDER" if [[ ! -e $file || ! -d "$vs_folder" ]]; then echo "Error - the HTML file $file or the folder $vs_folder appears to not exist." 2>&1 exit 1 fi output_dir="$dir/$folder$OP_FOLDER" if [[ ! -d $output_dir ]]; then mkdir $output_dir chmod ugo+rx $output_dir fi for img_file in $(ls $vs_folder/*.png ) do echo "Processing $img_file" img_file_base=$(basename "$img_file" '.png') out_img_file="$output_dir/$img_file_base.$Version_no.png" echo "Copying $img_file" to $out_img_file cp "$img_file" "$out_img_file" out_wiki_file="$output_dir/$img_file_base.$Version_no.wikitext" echo "Filtering $img_file.htm" to "$out_wiki_file" $($ImgMapFilterPath/$ImgMapFilter < "$vs_folder/$img_file_base.htm" > "$out_wiki_file") done

I'm not interested in PHP programming (I'm not a Developer - in any language) - but if anyone wants to convert these scripts into a MediaWiki "ImportVisioImageMap" extension - please feel free.

Regards, Ian.

קיפודנחש (talkcontribs)

note that "imagemap" is not a mediawiki thing, it's a very old (and scarcely used) feature of HTML, since very early version of the standard (according to https://en.wikipedia.org/wiki/Image_map , it's available since html 3.2, so 1997 - years before wikipedia and media wiki).

i would recommend googling "visio to html image map" - cursory search yielded https://chuvash.eu/2015/02/25/publishing-visio-diagrams-as-html-image-maps/ , but i didn't really read it very carefully and not sure how much it helps. other search results may yield better/more suitable answers.

peace. (talkcontribs)

Hello Peace,

Yes did the Googling - of course - and was aware of the chuvash article - and what Visio can do and the history of the imagemap concept [I was a web user before most browsers could handle imagemaps and invoked external programs]. But it isn't what I want to do - and Visio loads up the HTML with all sorts of unnecessary "garbage" that is nothing to do with presenting diagrammatic information (but just "programmer twaddle"). It is far from "clean".

What I'm after is clickable, hyperlinked diagrams in mediawiki - without the authors having to learn HTML (or get anywhere near any form of programming).

קיפודנחש (talkcontribs)

so, User:Dapete, who is an editor of dewiki created a _manual_ tool to generate imagemaps. we (i.e., hewiki), load this tool so it's available for everyone. you can load it for yourself by calling something like:

	if ( mw.config.get( 'wgNamespaceNumber' ) === 6 ) {
		try {
			mw.loader.load( '//tools.wmflabs.org/imagemapedit/ime.js' );
		catch( e ) {
		} // surround with try/catch in case other server behaves badly.

this will create a small "imageMapEdit" clickable linkette to appear under the image in the "File" namespace, which puts you in a little "imagemap editor".

however, this is not what you asked for in your original question: you asked about something to convert visio images to imagemaps. for this, the conversion tool i mentioned earlier seems like the right answer.

the user is not required to know anything about HTML, but they _are_ required to be able to use wikitext.

using wikitext, they can then create an "imagemap" tag, and feed it the output of the conversion tool.



Reply to "Visio to MediaWiki Image Maps"
Xaris333 (talkcontribs)

Hello. I am trying to do an ImageMap . I am using polygon selection. Do you know if there is a software that can select an area (maybe by color or by magic wand) to find the coordinates? Polygon selection is not the best solution. (talkcontribs)

The difficulty in finding the coords of the polygon vertices (on an image) is one of the reasons I use Visio. When you save as a web page it outputs the polygon statements, with the coordinates for you in the HTML file (that match the image in the PNG file).

If your starting point is nothing but an image one technique (in Visio or similar programs) is to overlay 'invisible' polygon shapes - that then generate the poly statements with the coordinates.

Reply to "Image map coordinates"
Baxi69 (talkcontribs)


I am working with GraphViz extension using ImageMap extension.

I want to give some nodes some wiki links with a query string to purge.



Typing the link in the browser works fine as expected.

The problem here is, that GraphViz creates an error with the "&".


Using "&amp;" works fine in GraphViz, but MW don't do the purge.  

I now added a line to ImageMap body.php at line 151:

# Find the link

$link = trim( strstr( $line, '[' ) );

$link = str_replace ( '&amp;' , '&' , $link ); //<== This is the new line to add

Any ideas for other solutions?

Or can we add this line to the source?

Ciencia Al Poder (talkcontribs)

Imagemap works fine with links that contain ampersands:

Alt text
About this image

The problem may be the GraphViz extension

Baxi69 (talkcontribs)

Yes ampersands ("&") are no problem in ImageMap. But GraphViz don't work with them, so I have to use "&" instead. ImageMap works with them too, but MW don't.

Reply to "ImageMap and GraphVit extension"

strange behavior in the editing field when in preview mode

Christharp (talkcontribs)

I just tested ImageMap on the Foreground skin and found some strange behavior (which I am sure is a skin js problem, but it can't hurt to mention it here):

When trying to click back into the editing section underneath a preview (wikieditor) my browser keeps trying to send me to a new page. It's, as if, the ImageMap has been over laid not just on the page, but so over the entire editing section.

@Hutchy68 (thanks for a great skin & the update to Foundation 5)

Reply to "strange behavior in the editing field when in preview mode"

Facility to click an image- and hear a .ogg

ClemRutter (talkcontribs)

Excuse me if I am asking the wrong question at the wrong place at the wrong time.

At the (link to: https://en.wikipedia.org/wiki/Wikipedia:GLAM/British_Library/British_wildlife_edit-a-thon_2015) we helped users to add links to 97 (of potentially 3000) files of wildlife sounds. An example would be (link to:en:Yellowhammer) This was added in two places in the text, and in the taxobox to the English page. But the challenge was discover how difficult it would be to add these files to all 216 wikipedias. Answer: the obscure languages are easy but the more active wikipedias have custom infobox and you need to have wili specific knowledge to do both links.

The House sparrow has be done in multiple languages, da,de,af,cy,eo,es and here in Catalan (link to ca:Pardal)

My fouryear old granddaughter loved the sounds and kept tapping the picture of the bird to make it sing (Evidence of user need). Two problems- it wasn't a touch screen (evidence of common sense)- and even if you click it with a mouse no sound. So her question what do have to write so her bird would sing.

Here comes the rub: Can image map be extended so clicking a region directly launches a sound clip- with out any associated graphics. The syntax has to simple enough to be used when training beginners. The sound system seems to work with multiple sound clips- so if I click 5 sounds sequentially they play together.

This facility in medawiki software opens fantastic opportunities for Mediawiki intranets in Libraries and schools- and would be a great thank you to our partners the British Library and Europeana who are providing us with the .ogg files.

The British Library Sound Files

Reply to "Facility to click an image- and hear a .ogg"
David Mason (talkcontribs)

using MW 1.25.3, and able to install other extensions, using

composer require mediawiki/image-map @dev

Fails with:


  Failed to execute git clone --no-checkout 'https://gerrit.wikimedia.org/r/p/mediawiki/extensions/ImageMap.git' 'extensions/ImageMap/' && cd 'extensions/ImageMap/'

  && git remote add composer 'https://gerrit.wikimedia.org/r/p/mediawiki/extensions/ImageMap.git' && git fetch composer

  Cloning into 'extensions/ImageMap'...

  error: RPC failed; result=56, HTTP code = 0 

  fatal: The remote end hung up unexpectedly
Ciencia Al Poder (talkcontribs)

works for me, maybe it was a temporary problem (in that case try again), or your machine is not able to contact gerrit.wikimedia.org using https

Reply to "Can't install via Composer"