It is currently Sun Jun 30, 2024 5:10 pm


All times are UTC - 5 hours [ DST ]



Post new topic Reply to topic  [ 17 posts ] 
Author Message
 Post subject: Link Area on image.
PostPosted: Mon Oct 05, 2020 12:06 am  (#1) 
Offline
Global Moderator
User avatar

Joined: Apr 01, 2012
Posts: 7742
Location: On the other side of this screen
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

_________________


Share on Facebook Share on Twitter Share on Orkut Share on Digg Share on MySpace Share on Delicious Share on Technorati
Top
 Post subject: Re: Link Area on image.
PostPosted: Mon Oct 05, 2020 12:25 am  (#2) 
Offline
GimpChat Member
User avatar

Joined: May 10, 2013
Posts: 1389
Location: FInland
This could help

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


Top
 Post subject: Re: Link Area on image.
PostPosted: Mon Oct 05, 2020 12:34 am  (#3) 
Offline
Global Moderator
User avatar

Joined: Apr 01, 2012
Posts: 7742
Location: On the other side of this screen
Nidhogg wrote:

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'

_________________


Top
 Post subject: Re: Link Area on image.
PostPosted: Mon Oct 05, 2020 1:04 am  (#4) 
Offline
GimpChat Member
User avatar

Joined: Sep 24, 2010
Posts: 12531
GIMP has had this capability for a long time now, Sallyanne. Go to Filters>Web>Image Map. :)

_________________
Lyle

Psalm 109:8

Image


Top
 Post subject: Re: Link Area on image.
PostPosted: Mon Oct 05, 2020 1:09 am  (#5) 
Offline
GimpChat Member
User avatar

Joined: May 10, 2013
Posts: 1389
Location: FInland
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.


Top
 Post subject: Re: Link Area on image.
PostPosted: Mon Oct 05, 2020 1:22 am  (#6) 
Offline
Global Moderator
User avatar

Joined: Apr 01, 2012
Posts: 7742
Location: On the other side of this screen
Nidhogg wrote:
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 :oops: - 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

_________________


Top
 Post subject: Re: Link Area on image.
PostPosted: Mon Oct 05, 2020 1:33 am  (#7) 
Offline
GimpChat Member
User avatar

Joined: May 10, 2013
Posts: 1389
Location: FInland
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.


Top
 Post subject: Re: Link Area on image.
PostPosted: Mon Oct 05, 2020 1:47 am  (#8) 
Offline
GimpChat Member
User avatar

Joined: Sep 24, 2010
Posts: 12531
OK; first you need to define the areas where you want clickable:

Attachment:
example.png
example.png [ 146.51 KiB | Viewed 6693 times ]


Then you export map:

<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)):

<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. :)

_________________
Lyle

Psalm 109:8

Image


Last edited by lylejk on Mon Oct 05, 2020 2:04 am, edited 3 times in total.

Top
 Post subject: Re: Link Area on image.
PostPosted: Mon Oct 05, 2020 1:49 am  (#9) 
Offline
GimpChat Member
User avatar

Joined: Sep 24, 2010
Posts: 12531
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). :)

_________________
Lyle

Psalm 109:8

Image


Top
 Post subject: Re: Link Area on image.
PostPosted: Mon Oct 05, 2020 2:33 am  (#10) 
Offline
Global Moderator
User avatar

Joined: Apr 01, 2012
Posts: 7742
Location: On the other side of this screen
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 :)

_________________


Top
 Post subject: Re: Link Area on image.
PostPosted: Mon Oct 05, 2020 2:38 am  (#11) 
Offline
Script Coder
User avatar

Joined: Feb 18, 2011
Posts: 4827
Location: Bendigo Vic. Australia
Sallyanne please see tutorial Creating an image map with gimp that I've posted to explain the whole procedure

_________________
Image
No matter how much you push the envelope, it'll still be stationery.


Top
 Post subject: Re: Link Area on image.
PostPosted: Mon Oct 05, 2020 3:42 am  (#12) 
Offline
Global Moderator
User avatar

Joined: Apr 01, 2012
Posts: 7742
Location: On the other side of this screen
:( 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.

_________________


Top
 Post subject: Re: Link Area on image.
PostPosted: Mon Oct 05, 2020 3:53 am  (#13) 
Offline
Global Moderator
User avatar

Joined: Apr 01, 2012
Posts: 7742
Location: On the other side of this screen
Graechan wrote:
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.

_________________


Top
 Post subject: Re: Link Area on image.
PostPosted: Mon Oct 05, 2020 10:21 am  (#14) 
Offline
GimpChat Member
User avatar

Joined: Sep 24, 2010
Posts: 12531
Well, that sucks. Maybe you can host both files on Microsoft OneDrive. :)

_________________
Lyle

Psalm 109:8

Image


Top
 Post subject: Re: Link Area on image.
PostPosted: Tue Oct 06, 2020 5:49 am  (#15) 
Offline
Global Moderator
User avatar

Joined: Apr 01, 2012
Posts: 7742
Location: On the other side of this screen
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.

_________________


Top
 Post subject: Re: Link Area on image.
PostPosted: Tue Oct 06, 2020 8:57 am  (#16) 
Offline
GimpChat Member
User avatar

Joined: Sep 27, 2016
Posts: 345
Location: Germany, BW
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.

_________________
Regards
nelo

(Gimp 2.10 on Linux Mint MATE 20.1)


Top
 Post subject: Re: Link Area on image.
PostPosted: Tue Oct 06, 2020 3:18 pm  (#17) 
Offline
GimpChat Member
User avatar

Joined: Sep 24, 2010
Posts: 12531
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. :)

_________________
Lyle

Psalm 109:8

Image


Top
Post new topic Reply to topic  [ 17 posts ] 

All times are UTC - 5 hours [ DST ]


   Similar Topics   Replies 
No new posts In area 51

4

No new posts Attachment(s) Guide to Dinasset's Drawing Effect Abecedary _ PDFs with a LINK

8

No new posts Draw Arrows/Draw Shapes: Sorry! My download link hadn't worked.

0

No new posts Retexture an image with another image as "Image Pattern" Plug-in

4



* Login  



Powered by phpBB3 © phpBB Group