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
Topic on Extension talk:ImageMap
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öß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;#xf6;&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.