Extension talk:ImageMap/Archive 2/Flow export

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 (UTC)

Please request such features on bugzilla: Ciencia Al Poder (talk) 18:12, 22 April 2012 (UTC)

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

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

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. Helder 13:26, 23 April 2012 (UTC)

bugzilla:36175 קיפודנחש (talk) 15:02, 23 April 2012 (UTC)

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 (UTC)

Wow! that's a very useful script! Thanks for sharing ;) Ciencia Al Poder 17:03, 12 February 2012 (UTC)

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 (UTC)

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 81.81.101.167 06:45, 9 June 2012 (UTC)

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">
<imagemap>
Image:imagename.jpg
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]
...etc
</imagemap>
</div>

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. קיפודנחש (talk) 16:47, 9 June 2012 (UTC)

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 151.59.229.95 19:31, 9 June 2012 (UTC)

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). קיפודנחש (talk) 16:01, 10 June 2012 (UTC)

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? 151.30.209.0 12:19, 18 June 2012 (UTC)

register here and send me an email. קיפודנחש (talk) 19:21, 18 June 2012 (UTC)

Hello I would like to send an email but when I click on you becomes all in Hebrew and not understand anything :) Vendere (talk) 19:46, 18 June 2012 (UTC)

Vendere, you can use the following link to contact קיפודנחש (this opens up a wiki email form):

Special:EmailUser/קיפודנחש FreedomFighterSparrow (talk) 13:45, 20 June 2012 (UTC)

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, Cornucopia (talk) 23:09, 29 October 2012 (UTC)

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.

peace. קיפודנחש (talk) 14:52, 31 October 2012 (UTC)

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 : ) Cornucopia (talk) 20:12, 31 October 2012 (UTC)

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});
 					ol.append(li);
 				}
-				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);})
 			});
 		});

Cornucopia (talk) 10:02, 5 November 2012 (UTC)

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);
 					ol.append(li);
 				}

thanks again,

peace. קיפודנחש (talk) 16:09, 5 November 2012 (UTC)

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 Cornucopia (talk) 16:44, 5 November 2012 (UTC)

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.

peace. קיפודנחש (talk) 17:18, 5 November 2012 (UTC)

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 Cornucopia (talk) 14:21, 8 November 2012 (UTC)

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.

peace.

@@ -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 @@
 			context.fill();
 		}
 	}
-
+	
+	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'));}
+					)
+				);
 		});
 	}

קיפודנחש (talk) 23:02, 8 November 2012 (UTC)

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 :-) Cornucopia (talk) 13:28, 10 November 2012 (UTC)

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.

peace. קיפודנחש (talk) 18:20, 11 November 2012 (UTC)

Hi.

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 (UTC)

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.

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

Thank you for your quick answer. :) Nevermindz (talk) 13:59, 15 May 2013 (UTC)

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 WikiGremlin Dave (talk) 21:08, 19 April 2014 (UTC)

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.

peace. קיפודנחש (talk) 22:19, 19 April 2014 (UTC)

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 WikiGremlin Dave (talk) 23:45, 19 April 2014 (UTC)

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

Imagemap-Highlight.js:76:3

init .../imagemapedit/Imagemap-Highlight.js:76:3

fire .../load.php:45:104

fireWith .../load.php:46:431

Deferred/</deferred[tuple[0]].../load.php:47:765

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 (talk) 14:18, 28 June 2017 (UTC)

found a solution here: https://www.mediawiki.org/wiki/Project%3ASupport%20desk/Flow/2017/01#h-Extension_ImageMap-2017-01-19T12%3A42%3A00.000Z

mw.util.addCSS instead of appendCSS Krabina (talk) 14:41, 28 June 2017 (UTC)

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. קיפודנחש (talk) 16:40, 28 June 2017 (UTC)

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>

Krabina (talk) 08:45, 6 November 2017 (UTC)

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. קיפודנחש (talk) 18:06, 6 November 2017 (UTC)

if you remove the div triggering the highlight script, everything works as expected... Krabina (talk) 08:23, 7 November 2017 (UTC)

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... Krabina (talk) 08:26, 7 November 2017 (UTC)

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
});

peace. קיפודנחש (talk) 15:32, 10 November 2017 (UTC)

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. Krabina (talk) 14:20, 14 November 2017 (UTC)

Text Wrapping

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

<imagemap>
Image:Graphic.jpg|left|thumb|600px
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>

144.15.255.227 20:48, 29 March 2012 (UTC)

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 (UTC)

External link in other windows

Hello, Is it possible open the external link in other windows? target="blank" thank you 82.230.185.227 10:07, 9 April 2012 (UTC)

See Manual:$wgExternalLinkTarget. Cheers [[kgh]] (talk) 17:17, 9 April 2012 (UTC)

It doesn't work on MW 1.16.2. Normal link open in new window, imagemap link do not. 91.233.163.1 11:52, 12 November 2012 (UTC)

That's a bug on Extension:ImageMap, then. You can report a bug about that. Ciencia Al Poder (talk) 20:16, 12 November 2012 (UTC)

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.

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

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.
<imagemap>
image:TheVisualSystem.png
rect 1 1 100 100 [[The Visual Stimulus|What is Visual Stimulus?]]
desc none
</imagemap>

If I change image name to a url like

<imagemap>
image:http://localhost:8080/images/TheVisualSystem.png
rect 1 1 100 100 [[The Visual Stimulus|What is Visual Stimulus]]
desc none
</imagemap>

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 (UTC)

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 (UTC)

Thanks for your reply Ciencia. The first example works fine. But on the ImageMap extension link

http://www.mediawiki.org/wiki/Extension:ImageMap#Parameters_to_allow_external_links

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 (UTC)

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 (UTC)

Ok I see ... Thanks. Samsun137 (talk) 18:56, 4 November 2012 (UTC)

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. TMg 20:04, 13 November 2012 (UTC)

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

Thanks. Mitchelln (talk) 10:05, 18 February 2013 (UTC)

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.

peace. קיפודנחש (talk) 21:55, 18 February 2013 (UTC)

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? TMg 11:53, 5 March 2013 (UTC)

I agree: I also thinkg the "i" should not be there, but the standard icon for thumbnails should be used. Krabina (talk) 14:28, 14 November 2017 (UTC)

@Volker E. (WMF), are you aware of plans to change this icon as part of the UI standardization process? TMg 19:19, 15 November 2017 (UTC)

@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. Volker E. (WMF) (talk) 23:55, 15 November 2017 (UTC)

done: https://phabricator.wikimedia.org/T190725 Krabina (talk) 20:58, 26 March 2018 (UTC)

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 (UTC)

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 (UTC)

Getting Started

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 86.30.48.49 19:32, 30 October 2013 (UTC)

Notice some people are asking for the mw config screen details

http://nunki.org/wiki/index.php/File:Mw_config.png

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... :< 86.30.48.49 19:49, 30 October 2013 (UTC)

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:

<imagemap>
File:Mw config.png
rect 0 0 200 200 [[Main Page|Go to main page]]
</imagemap>

Ciencia Al Poder (talk) 10:27, 31 October 2013 (UTC)

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 [2] EEng (talk) 00:41, 3 November 2013 (UTC)

externLink and $wgNoFollowDomainExceptions

Currently the extension does not support:

$wgNoFollowDomainExceptions

I had to change Line 200 in ImageMap_body.php

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

178.12.235.130 09:49, 6 November 2013 (UTC)

Please report a bug Ciencia Al Poder (talk) 10:32, 6 November 2013 (UTC)

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 (UTC)

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 (UTC)

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 (UTC)

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 (UTC)

PHP notices when running runJobs.php

The following discussion is closed. Please do not modify it. Subsequent comments should be made on the appropriate discussion page. No further edits should be made to this discussion.

---

With MW 1.21 and MW 1.22 I am once in a while getting these PHP notices when running runJob.php Cannot tell for earlier versions since I did not sysadministrate the wiki earlier.

PHP Notice:  Undefined variable: title in /.../extensions/ImageMap/ImageMap_body.php on line 165

Is this just the result of erroneous usage on some wiki pages or an issue to be rectified in the code base? I am asking here prior to reporting a possibly invalid bug. [[kgh]] (talk) 09:47, 8 June 2014 (UTC)

https://git.wikimedia.org/blob/mediawiki%2Fextensions%2FImageMap/REL1_22/ImageMap_body.php#L163

Although it's probably an erroneous usage (an imagemap without link), it does seem to be a bad quality code too, because a PHP notice shouldn't be there. Basically, the $title is not being defined in that particular code path (if there's no default link). If you have E_NOTICE errors enabled on the webserver, they may end being displayed on the page when it happens. Ciencia Al Poder (talk) 18:53, 8 June 2014 (UTC)

Thank you for your comment on this which made me report bug 66361 and your suggesting to widen error reporting. :) [[kgh]] (talk) 07:02, 9 June 2014 (UTC)

The discussion above is closed. Please do not modify it. No further edits should be made to this discussion.

Image Map Edit link

The Image Map Edit link (http://toolserver.org/~dapete/ImageMapEdit/ImageMapEdit.html?en) is saying that dapete's account has expired. Does anyone know who maintains this tool? PhotographerTom (talk) 21:42, 18 November 2014 (UTC)

See m:User:Dapete/ImageMapEdit#English. Shirayuki (talk) 22:56, 18 November 2014 (UTC)

Extension ImageMap with Extension Header Tabs

Hi, we're using both extensions and they're working very well on our wiki.

But now I'm stuck.

If I want to link to a tab (produced with Extension Header Tabs) from within that same page I can do it using the {{#switchtablink}} parser function and it works. The code looks like this:

{{#switchtablink:Tab name|Link text}}</pre>

Linking from an image using [[Extension:ImageMap#Usage with templates, magic words, or parser functions.|this description]] doesn't work. I get "<imagemap>-Fehler: ungültiger Titel im Link in Zeile 4".
My code looks like this:

<pre>{{#tag:imagemap|
Datei:XYZ.JPG{{!}}1000px

rect 688 261 871 346 [[{{#switchtablink:ABC|ABC}}]]
rect 909 550 1075 641 [[DEF|DEF]]

desc none
}}</pre>

Do I miss something? Mostly it's just a forgotten pipe, a bracket too much or whatever... 
Unfortunately we have a closed wiki, so I can't post a link.

Any help/idea is highly appreciated.
Thanks in advance!

MediaWiki 1.21.1, PHP 5.4.19, MySQL 5.5.32 [[User:Deli68|Deli68]] ([[User talk:Deli68|talk]]) 14:30, 12 February 2015 (UTC)
:ImageMap is very simplistic, and it doesn't send the contents of the tag to the parser. Instead, it reads line by line, interpreting each line and generating links as needed.
:It validates each link by looking if the link target is a valid page title (for internal links). If not, it throws that error.
:There's no way to insert a parser function or even a Magic Word in the content of the link because of this. You should probably open a bug report for this. [[User:Ciencia Al Poder|Ciencia Al Poder]] ([[User talk:Ciencia Al Poder|talk]]) 17:51, 12 February 2015 (UTC)
::Thanks a lot for your reply, even though it's not satisfying...
::I've opened a task on [https://phabricator.wikimedia.org/tag/mediawiki-extensions-imagemap/ Phabricator T89643] [[User:Deli68|Deli68]] ([[User talk:Deli68|talk]]) 13:31, 16 February 2015 (UTC)

== Template inside of slippymap ==

Im want us a template inside of the string <slippymap lat="48.07" lon="16.233333" z="15" w="360" h="360" layer="Mapnik" marker="0" />
lat und lon should be created through a template to read out metadata. e.g. <slippymap lat="{{Gdekoord-Nord|Hinterbrühl}}" lon="16.233333" z="15" w="360" h="360" layer="Mapnik" marker="0" /> But it doesn't work. Are there an other possibility. thx in adv. [[User:Karl Gruber|Karl Gruber]] ([[User talk:Karl Gruber|talk]]) 10:44, 3 March 2015 (UTC)
:you should use {{#tag:slippymap
:see [[Help:Magic words]] (last item in table)
:peace. [[User:קיפודנחש|קיפודנחש]] ([[User talk:קיפודנחש|talk]]) 20:45, 9 March 2015 (UTC)
::Sorry, but I am a little bit confused and can't understand. Would you be so helpfull and write me my sample: <slippymap lat="{{Gdekoord-Nord|Hinterbrühl}}" lon="16.233333" z="15" w="360" h="360" layer="Mapnik" marker="0" />. Thanks in advance -- [[User:Karl Gruber|Karl Gruber]] ([[User talk:Karl Gruber|talk]]) 21:42, 9 March 2015 (UTC)
:::according to the documentation, it should be something like:
:::<syntaxhighlight lang='text'>{{#tag:slippymap
 | lat = {{Gdekoord-Nord|Hinterbrühl}}
 | lon = 16.233333 
 | z = 15 
 | w = 360 
 | h = 360 
 | layer = Mapnik 
 | marker = 0
}}
</syntaxhighlight>
:::in your question, it seems that the tag itself has no body. if it would, you would want the body to appear as a nameless parameter - i ususally use "1 =" for nameless parameters.
:::HTH,
:::peace [[User:קיפודנחש|קיפודנחש]] ([[User talk:קיפודנחש|talk]]) 13:43, 14 March 2015 (UTC)
::::Many thanks, it's a verry big help und helpfull [[User:Karl Gruber|Karl Gruber]] ([[User talk:Karl Gruber|talk]]) 16:16, 14 March 2015 (UTC)

== ImageMap with external images? ==

It would be a great feature if the exension worked also on external images. Setting $wgAllowExternalImages = true; in Localsettings enables external images to be displayed on wiki pages without having to upload them.

Putting an image map over an external image makes much sense. Could that be done? [[User:Krabina|Krabina]] ([[User talk:Krabina|talk]]) 09:49, 30 September 2015 (UTC)
:External images can't be resized, which is part of the functionality ImageMap relies on, so I highly doubt it could be done [[User:Ciencia Al Poder|Ciencia Al Poder]] ([[User talk:Ciencia Al Poder|talk]]) 09:51, 30 September 2015 (UTC)
:they can if you allow and use the html image tag <img src... [[User:Krabina|Krabina]] ([[User talk:Krabina|talk]]) 12:41, 30 September 2015 (UTC)

== Can't install via Composer ==

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

 composer require mediawiki/image-map @dev

Fails with:

<pre>[RuntimeException]

  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

David Mason (talk) 13:04, 12 November 2015 (UTC)

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 Ciencia Al Poder (talk) 19:39, 12 November 2015 (UTC)

Facility to click an image- and hear a .ogg

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) En: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 En:Yellowhammer (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) 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 [3] ClemRutter (talk) 13:02, 18 November 2015 (UTC)

strange behavior in the editing field when in preview mode

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) Christharp (talk) 21:37, 6 January 2016 (UTC)

ImageMap and GraphVit extension

Hi,

I am working with GraphViz extension using ImageMap extension.

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

Sample:

Https://....index.php?title=PageToCall&action=purge</pre>

Typing the link in the browser works fine as expected.  

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

Https://....index.php?title=PageToCall&amp;action=purge</pre>

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</pre>

Any ideas for other solutions?

Or can we add this line to the source? Baxi69 (talk) 20:34, 25 February 2016 (UTC)
:Imagemap works fine with links that contain ampersands:
:
:The problem may be the GraphViz extension Ciencia Al Poder (talk) 10:26, 26 February 2016 (UTC)
: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. Baxi69 (talk) 23:39, 28 February 2016 (UTC)

Visio to MediaWiki Image Maps

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. Ian Glossop (talk) 12:06, 13 February 2017 (UTC)
: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
:En:Image map
:En: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. קיפודנחש (talk) 19:34, 13 February 2017 (UTC)
: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). 82.152.149.139 (talk) 14:38, 6 March 2017 (UTC)
: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.
:HTH,
:peace. קיפודנחש (talk) 16:38, 6 March 2017 (UTC)

Image map coordinates

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. Xaris333 (talk) 19:09, 21 February 2017 (UTC)
: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. 82.152.149.139 (talk) 14:52, 6 March 2017 (UTC)

Hovercards

The mapped links don't appear to work with Extension:Popups, is that intentional? I need popups for exactly this purpose. 62.65.230.212 (talk) 18:40, 5 September 2017 (UTC)
:No one knows? Lyrixn (talk) 12:33, 6 September 2017 (UTC)

Error with imagemap and MD5

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. Squeak24 (talk) 13:57, 9 March 2018 (UTC)
: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 Ciencia Al Poder (talk) 16:05, 9 March 2018 (UTC)

using Media: in the image map

I would like to use a link on the image to open media. This is the code I am using. The link takes us to the file:docname.docx.

rect 652 198 854 212 [[media:docname.docx|docname]]

Is there a way this can be done with the current version of the extension? Issiegainsley (talk) 16:10, 23 April 2018 (UTC)
:If the media: link fails, you may try the Special:FilePath link that's leaking from your message Ciencia Al Poder (talk) 17:23, 23 April 2018 (UTC)
:I'm not clear on your suggestion. If you could, please clarify.
:Thanks, Issie Issiegainsley (talk) 18:55, 23 April 2018 (UTC)
:rect 652 198 854 212 [[Special:FilePath/BF006 Preliminary SolutionDefinition.docx|docname]] Ciencia Al Poder (talk) 20:01, 23 April 2018 (UTC)
:I understand now. Thank you! Issiegainsley (talk) 20:03, 23 April 2018 (UTC)
:That leaking during a copy is a deterrent to using mediawiki. That was really easy to do. :( Issiegainsley (talk) 20:14, 23 April 2018 (UTC)
:What is this "leaking"? :) Banaticus (talk) 16:42, 1 May 2018 (UTC)

Help with my imagemap

Hello, I have recently tried to use ImageMap on my wiki and I believe I've followed all proper formatting but when I save the page, the ImageMap displays as raw text rather than the actual map. This is really frustrating, can someone help me?

The page is https://star-haven.net/wiki/Template:Interactive_Map and all the source code is there. I'd really appreciate any advice or anyone who can figure out what exactly I'm doing wrong. I've quadruple-checked it but I just seem to be missing something. Daintiiyt (talk) 16:42, 16 September 2019 (UTC)
:The extension is not installed, it's not listed on https://star-haven.net/wiki/Special:Version
:You need to add it to LocalSettings.php as described on the installation instructions Ciencia Al Poder (talk) 09:09, 18 September 2019 (UTC)

A good world map somewhere ?

Hi, I was wondering if anyone knows a free to use world image map ?
I know this template exists ( https://en.wikipedia.org/wiki/Template:World_image_map ) but it only shows an image map by continent. I'm looking for an image map with all countries. Varlin (talk) 21:49, 7 May 2020 (UTC)
:Have u tried Commons? They have hundreds if not thousands of them.
:*https://commons.wikimedia.org/wiki/Commons:Map_resources
:*https://commons.wikimedia.org/wiki/Category:Blank_maps
:*https://commons.wikimedia.org/wiki/Category:Locator_maps Bennylin (talk) 20:26, 1 August 2020 (UTC)
:These are raw images, I was talking of an "image map", I mean, with the clickable areas defined (the biggest part of the work :) Varlin (talk) 09:24, 12 May 2021 (UTC)
:How big would that map be, for the users to be able to click all the small states in the world (Singapore, Monaco, Lesotho, etc.)? Probably a good place to request would be in en.wiki, either in https://en.wikipedia.org/wiki/Template_talk:World_image_map or Village pump, where expert template-masters might be able to help. Bennylin (talk) 00:02, 15 May 2021 (UTC)

Default link to commons image


The following discussion is closed. Please do not modify it.  Subsequent comments should be made on the appropriate discussion page. No further edits should be made to this discussion.



I created an imagemap (at en.wikipedia.org/wiki/Incremental_encoder, section Incremental_encoder_interface). The imagmap's default link doesn't correspond to an external article, so I'm trying to link it to the associated commons image -- which is where a click would normally take me in the case of any other image. The desired link shows up when I hover over a "default" imagemap region, but clicking has no effect. Is there any workaround for this issue? Lambtron (talk) 20:00, 15 June 2021 (UTC)
:I've fixed it to behave correctly for you. The only issue was that you'd forgotten the File: namespace. =) 「ディノ奴千？！」☎ Dinoguy1000 21:06, 15 June 2021 (UTC)
The discussion above is closed. Please do not modify it. No further edits should be made to this discussion.


The blue "i" icon


The following discussion is closed. Please do not modify it.  Subsequent comments should be made on the appropriate discussion page. No further edits should be made to this discussion.



The small (20x20px)  [[:File:Desc-20.png|PNG]] of 1171 bytes does not look good. There are  better SVG,  [[:File:Desc-i.png|3102]] and 972 bytes, shown in the PNG's file decrition. -- sarang♥사랑 12:33, 18 December 2021 (UTC)
:shit, i cannot edit the errors of that comment\ -- sarang♥사랑 12:39, 18 December 2021 (UTC)
:Done Ciencia Al Poder (talk) 14:56, 18 December 2021 (UTC)
The discussion above is closed. Please do not modify it. No further edits should be made to this discussion.


Where are the described icons associated to images ?


The following discussion is closed. Please do not modify it.  Subsequent comments should be made on the appropriate discussion page. No further edits should be made to this discussion.



In section 1.1 Simple example without caption, text says 
 "To find out more about the image, click on the blue "i" icon "
but there is NO blue icon displayed with the image

In section 1.2 Complex example with caption, text says 
 "To find out more about the image, click on the double-rectangle icon "

but there is NO double-rectangle  icon displayed with the image.

Can someone extend the examples such as these icons appear ? Thanks.

Christian 🇫🇷 FR (talk) 11:01, 10 February 2023 (UTC)
:The icons were there a year ago, but now definitively aren't. This looks like a bug in the extension, probably caused by phab:T51097 Ciencia Al Poder (talk) 12:05, 10 February 2023 (UTC)
The discussion above is closed. Please do not modify it. No further edits should be made to this discussion.


Missing "info" icon. Known bug?


The following discussion is closed. Please do not modify it.  Subsequent comments should be made on the appropriate discussion page. No further edits should be made to this discussion.



Please read this:

:To find out more about the image, click on the blue "i" icon 

This is a quote from Extension:ImageMap but I was not able to find that info icon on the image itself. Can somebody else confirm this problem? Valerio Bozzolan (talk) 16:18, 7 March 2023 (UTC)
:I don't see it. Maybe it's not a bug and the documentation is wrong or incomplete. ~ Mgkrupa (talk) 17:35, 7 March 2023 (UTC)
:Yes, it's a bug, and it was brought up in the topic just below this one :)
:Extension talk:ImageMap/Archive 2/Flow export#h-Where_are_the_described_icons_associated_to_images_?-20230210110100 Ciencia Al Poder (talk) 17:52, 7 March 2023 (UTC)
The discussion above is closed. Please do not modify it. No further edits should be made to this discussion.


Color

Hi, 

Is there a parameter to customize a different color at each poly ?

Thanks Angelicadia (talk) 10:57, 18 September 2023 (UTC)
:Polygons are invisible. Am I missing something? Ciencia Al Poder (talk) 21:35, 18 September 2023 (UTC)
:Everything is fine, the extension works good. 
:Just, I wanted to know if there was an option to color the polygons and that they are visible by transparency (not totally opaque or totally transparent) Angelicadia (talk) 01:21, 19 September 2023 (UTC)
:Oh, that's a very old request: phab:T21549
:It's currently not possible. Maybe you can install some JavaScript/jQuery plugin that would do that, like the "maphighlight" jQuery plugin someone posted here Ciencia Al Poder (talk) 08:31, 19 September 2023 (UTC)
:Thank you very much Ciencia Al Poder, 
:I'll see about that. 
:Have a nice day Angelicadia (talk) 08:57, 19 September 2023 (UTC)