Extension talk:ImageMap

Archives

previous talk on this page

Previous page history was archived for backup purposes at Extension talk:ImageMap/LQT Archive 1 on 2015-07-10.

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?

I don't see it. Maybe it's not a bug and the documentation is wrong or incomplete. ~~~~

Yes, it's a bug, and it was brought up in the topic just below this one :)

Topic:Xcce14k4p2po9xcd

Tracked in Phabricator
Task T329364

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

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\

Done

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?

I've fixed it to behave correctly for you. The only issue was that you'd forgotten the File: namespace. =)

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.

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

These are raw images, I was talking of an "image map", I mean, with the clickable areas defined (the biggest part of the work :)

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.

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.

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

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?

If the media: link fails, you may try the Special:FilePath link that's leaking from your message

I'm not clear on your suggestion. If you could, please clarify.

Thanks, Issie

rect 652 198 854 212 [[Special:FilePath/BF006 Preliminary SolutionDefinition.docx|docname]]

I understand now. Thank you!

That leaking during a copy is a deterrent to using mediawiki. That was really easy to do. :(

What is this "leaking"? :)

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.

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.

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.

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?

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

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

@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.

done: https://phabricator.wikimedia.org/T190725

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.

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

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 קיפודנחש.

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

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

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

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.

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

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

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?

register here and send me an email.

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

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

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.

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.

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.

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

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

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.

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.

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.

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.

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

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.

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.

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.

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.

peace.

Thank you for your quick answer. :)

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

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.

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

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

found a solution here: https://www.mediawiki.org/wiki/Topic:Tjetncvshdpowcgl mw.util.addCSS instead of appendCSS

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.

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>

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.

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

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...

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.

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.