Imagemap for wiki (hyperlinks placed on various parts of image)

narayan · 2010-09-20 05:57

We can introduce the GUI to the user in a more visual way.
Let the user just click on any part of the GUI to jump to the relevant help page.

This is possible through imagemap.
mediawiki has imagemap extension: http://www.mediawiki.org/wiki/Extension:ImageMap

den4b · 2010-09-20 20:05

I've added ImageMap and Collection extensions.
>> Two more extensions have been installed for Wiki.

I haven't tested ImageMap yet. Let me know how it works out for you.

narayan · 2010-09-21 02:28

Will do.

Thanks!

narayan · 2010-09-22 07:31

I found this imagemap editor guide: http://www.wikihow.com/Use-the-MediaWik … -Extension

I reached step-3 and identified the main screenshot's URL: http://www.den4b.com/wiki/File:ReNamer_Main_Steps.png
But I do not see any way to load it in the imagemap editor (I expected a link to editor on that page).

Do we have a local copy of imagemap editor? How is this supposed to work here?

den4b · 2010-09-22 11:27

I think you misunderstood their reference to "ImageMap Editor". They didn't mean any specific editor, they meant general software that can assist you in defining image map coordinates. You could also generate the coordinates manually, but it is more difficult. In that article they referred to somebody's online image map editor, which is in no way connected to the ImageMap extension that we are using.

Have a look at the official ImageMap extension page, you'll find more info there about compatible image map editors: Extension:ImageMap#Image_map_editor

narayan · 2010-09-22 12:51

I followed the eHow instructions given here: http://www.wikihow.com/Use-the-MediaWik … -Extension
Used this online imagemap editor: http://toolserver.org/~dapete/ImageMapE … it.html?en

But it cannot load the image: http://www.den4b.com/wiki/File:ReNamer_Main_Steps.png

Does it work for anyone?

SafetyCar · 2010-09-22 16:40

I didn't end the test, but the image is loaded, an seems to be working.

I'm thinking, maybe your problem is that you have used:
http://www.den4b.com/wiki/File:ReNamer_Main_Steps.png

Instead of (direct link to the image):
http://www.den4b.com/w/images/b/bc/ReNa … _Steps.png

?

Last edited by SafetyCar (2010-09-22 16:40)

narayan · 2010-09-22 18:19

Yes, that worked. Thanks!

I followed the process to create a hotspot on the "Add files+Add folders" area (marked with red rectangle and marked 1b on the Quick guide page), but I am getting an error:

"Error: at least one area specification must be given"

Can you check where the syntax is going wrong?
I think there is something wrong with "rect 76 58 253 82", but what?

Stefan · 2010-09-22 20:30

Instead of

<imagemap>Image:ReNamer Main Steps.png|rect 76 58 253 82 [[http://www.den4b.com/wiki/ReNamer:Adding_files_and_folders|Adding files and folders]]desc none</imagemap>

use:

<imagemap>
Image:ReNamer Main Steps.png|
rect 76 58 253 82 [[Name of the side, not the URL|description text here]]
desc none
</imagemap>

Test:

<imagemap>
Image:ReNamer Main Steps.png|
rect 76 55 253 85 [[Adding files and folders]]
rect 303 53 393 135 [[Previewing files|Description - See HowTo Previewing files]]
rect 465 55 545 85 [[Renaming files|I use just IrfanView (or such) to make an selection to get the rectangle coordinates, no external editor needed]]
desc none
</imagemap>

EDIT:
ahh, now i saw this link to Syntax examples:
http://www.mediawiki.org/wiki/Extension:ImageMap

Last edited by Stefan (2010-09-22 20:42)

den4b · 2010-09-22 23:54

Guys, please do not do tests on the live pages!

I have just discovered ReNamer:Quick Guide page filled with image map tests. Users may be browsing the Wiki while you are conducting those tests. If you do need to save the page with your tests, then use Talk pages, e.g. Talk:ReNamer:Quick Guide.

I moved all tests to the talk page and restored the article to the original state.

den4b Forum

#1 2010-09-20 05:57

Imagemap for wiki (hyperlinks placed on various parts of image)

#2 2010-09-20 20:05

Re: Imagemap for wiki (hyperlinks placed on various parts of image)

#3 2010-09-21 02:28

Re: Imagemap for wiki (hyperlinks placed on various parts of image)

#4 2010-09-22 07:31

Re: Imagemap for wiki (hyperlinks placed on various parts of image)

#5 2010-09-22 11:27

Re: Imagemap for wiki (hyperlinks placed on various parts of image)

#6 2010-09-22 12:51

Re: Imagemap for wiki (hyperlinks placed on various parts of image)

#7 2010-09-22 16:40

Re: Imagemap for wiki (hyperlinks placed on various parts of image)

#8 2010-09-22 18:19

Re: Imagemap for wiki (hyperlinks placed on various parts of image)

#9 2010-09-22 20:30

Re: Imagemap for wiki (hyperlinks placed on various parts of image)

#10 2010-09-22 23:54

Re: Imagemap for wiki (hyperlinks placed on various parts of image)

Board footer