Extension talk:ImageMap
 Archives |
| previous talk on this page
|
Contents
| Thread title | Replies | Last modified |
|---|---|---|
| Imagemap Area highlight script | 24 | 16:05, 15 May 2013 |
| Why is the icon so different from the thumb icon? | 3 | 11:53, 5 March 2013 |
| Third link keeps messing up, slow to load | 1 | 02:31, 11 December 2012 |
| External link in other windows | 4 | 00:09, 13 November 2012 |
| Use ImageMap with Inline Linking that is ImageMap on images not uploaded to wiki | 4 | 18:56, 4 November 2012 |
| Need to distinguish "red" links from "blue" links (and add external, while you're at it) | 4 | 15:02, 23 April 2012 |
| Text Wrapping | 1 | 18:07, 22 April 2012 |
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
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
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: [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.
Thank you for your quick answer. :)
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.
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 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
Hello, Is it possible open the external link in other windows? target="blank" thank you
See Manual:$wgExternalLinkTarget. Cheers
It doesn't work on MW 1.16.2. Normal link open in new window, imagemap link do not.
That's a bug on Extension:ImageMap, then. You can report a bug about that.
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.
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.
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?
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.
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).
Please request such features on bugzilla:
is there a bugzilla topic for this extension? for all extensions? how are extensions managed via bugzilla?
peace.
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.
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>
