#1 2010-09-20 05:57

narayan
Senior Member
Registered: 2009-02-08
Posts: 471

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

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

Offline

#2 2010-09-20 20:05

den4b
Administrator
From: den4b.com
Registered: 2006-04-06
Posts: 3,437

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

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.

Offline

#3 2010-09-21 02:28

narayan
Senior Member
Registered: 2009-02-08
Posts: 471

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

Will do.

Thanks!

Offline

#4 2010-09-22 07:31

narayan
Senior Member
Registered: 2009-02-08
Posts: 471

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

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?

Offline

#5 2010-09-22 11:27

den4b
Administrator
From: den4b.com
Registered: 2006-04-06
Posts: 3,437

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

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

Offline

#6 2010-09-22 12:51

narayan
Senior Member
Registered: 2009-02-08
Posts: 471

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

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?

Offline

#7 2010-09-22 16:40

SafetyCar
Senior Member
Registered: 2008-04-28
Posts: 446
Website

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

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)


If this software has helped you, consider getting your pro version. :)

Offline

#8 2010-09-22 18:19

narayan
Senior Member
Registered: 2009-02-08
Posts: 471

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

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?

Offline

#9 2010-09-22 20:30

Stefan
Moderator
From: Germany, EU
Registered: 2007-10-23
Posts: 1,161

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

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)


Read the  *WIKI* for HELP + MANUAL + Tips&Tricks.
If ReNamer had helped you, please *DONATE* to Denis or buy a PRO license. (Read *Lite vs Pro*)

Offline

#10 2010-09-22 23:54

den4b
Administrator
From: den4b.com
Registered: 2006-04-06
Posts: 3,437

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

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.

Offline

Board footer

Powered by FluxBB