Link Area on image.

[sallyanne]

GIMP Version: 2.10.20
Operating System: Windows
OS Version: Home 64 bit
GIMP Experience: New User

---

How do I create a linkable area on an image? I have been following a tutorial on YouTube without success. https://www.youtube.com/watch?v=LZQ2PNFPi8U

I have this picture that I need to put an email link into and then put it up on the web.
Thank you for any and all help

[Nidhogg]

This could help

https://www.image-map.net/

[sallyanne]

This could help

https://www.image-map.net/

Thanks that probably would be a quick an easy way but I want to know how to do it in gimp. I may need to do more if I can finally learn. I got a few of the steps right following the tut but either that person has a different version of gimp or I missed something. I couldn't see the 'run' after I made the 'hot spot'

[lylejk]

GIMP has had this capability for a long time now, Sallyanne. Go to Filters>Web>Image Map.

[Nidhogg]

I tested the YouTube tutorial successfully. But I couldn't hear the narrator at all because I have only internal speaker in my work PC and the sound in the video is on very low level.

[sallyanne]

I tested the YouTube tutorial successfully. But I couldn't hear the narrator at all because I have only internal speaker in my work PC and the sound in the video is on very low level.

Yeah I found it very quiet. I had to turn my speakers up really high. I'll try it again
@ Thanks Lyle I found where that was in the tut but couldn't find where they clicked on 'run' (to show you if the link worked or not - I never got a changed cursor like you do with links.)
EDIT: found 'Run' - it was in the notepad - Every time I click on run I just get the code in a web page and not the picture, now I just want to have the picture saved with a link so I can upload it to a certain page with the link already embedded. Hope that is possible.
I tried the other site you gave me Nidhogg and it just gives you a code - I assume for creating html web pages

[Nidhogg]

They clicked 'run' on a notepad++. You need to copy the image map code from the 'view source' window to a text editor, because it can't be edited in the image map plug-in.

[lylejk]

OK; first you need to define the areas where you want clickable:

example.png (146.51 KiB) Viewed 6718 times

Then you export map:

Code:

<img src="[CaptureMe] (imported)" width="256" height="328" border="0" usemap="#map" />

<map name="map">
<!-- #$-:Image map file created by GIMP Image Map plug-in -->
<!-- #$-:GIMP Image Map plug-in by Maurits Rijk -->
<!-- #$-:Please do not edit lines starting with "#$" -->
<!-- #$VERSION:2.3 -->
<!-- #$AUTHOR:Lylejk -->
<area shape="circle" coords="54,68,22" href="www.gimpchat.com" />
<area shape="circle" coords="165,123,26" href="www.yahoo.com" />
</map>


Then you modify the .MAP file and save as a .HTM file (change the image source and add to actual name of image; update the URLs by adding "https://" too on those sites where needed (GIMPChat does not)):

Code:

<img src="CaptureMe.PNG" width="256" height="328" border="0" usemap="#map" />

<map name="map">
<!-- #$-:Image map file created by GIMP Image Map plug-in -->
<!-- #$-:GIMP Image Map plug-in by Maurits Rijk -->
<!-- #$-:Please do not edit lines starting with "#$" -->
<!-- #$VERSION:2.3 -->
<!-- #$AUTHOR:Lylejk -->
<area shape="circle" coords="54,68,22" href="http://www.gimpchat.com" />
<area shape="circle" coords="165,123,26" href="https://www.yahoo.com" />
</map>


Then you move both image file and .HTM file to your host site for all the world to see.

[lylejk]

Yeah; I'm now much fatter then when the artist rendered my Avatar. lolololol

Still, my hair's not white yet. lol

I did test my .HTM file and it works by the way (as a local .HTM of course; don't have a host site to use).

[sallyanne]

Thanks alot for all your help. I'll give it another go and let you know how I fared.

@ Nidhogg I use notepad++ As you can see in my edit I eventually found it. I watched the tut again and saw I was looking for it in the wrong place.
Thanks for the time Lyle@ Nidhogg. Appreciated

[Graechan]

Sallyanne please see tutorial Creating an image map with gimp that I've posted to explain the whole procedure

[sallyanne]

Now it tells me my image is corrupt and cannot be uploaded to the place where it was. I have tried this all afternoon and still have to start all over again. May after I check out my other sites. Been neglecting them :O I'll let you know if I finally get it.

[sallyanne]

Sallyanne please see tutorial Creating an image map with gimp that I've posted to explain the whole procedure

Thanks for the tut. Will follow it after

EDIT:_
I think it might be the site I'm trying to post to. We have a page on Facebook and my officer wants a 'live' link in one of the pictures. You cannot even comment live email address links there. Maybe its for protection of the masses.

EDIT:- I have done the image again and I did the imagemapping again per your tut and looks like they won't allow it.

[lylejk]

Well, that sucks. Maybe you can host both files on Microsoft OneDrive.

[sallyanne]

Can't on OneDrive either Lyle unless I have done something wrong. I might try mahvin's suggestion of using a WAMP server tomorrow. Thanks all.

[nelo]

Can it be because of FB?
For image maps to work you need to upload both the image and the html.
But I guess you can't upload html to FB, so no chance to do what you try.

[lylejk]

For OneDrive, you will need to get the image URL's complete path as the img=, Sallyanne. You can't just use the original name.