Post Reply 

Filters>Web>Image Map

Apr 13, 2012, 22:18
Post: #1
Filters>Web>Image Map

I have been trying to master this filter with little luck/aptitude at this point and i'm hoping someone will be able to help me further understand/use this awesome tool.

This is what i do:

1) open/create image

2) image > flatten image (must i flatten the image? or would merge visible layers works? or is it okay as long as i have just one layer? i ask b/c i would like to use an image that's round w/a transparent BG & it seems as though the reason for the flatten image is to remove the transparency. also, what's the difference between using flatten image & semi-flatten?).

3) choose a selection tool > (eg. the circle, rectangle or polygon) > draw around a particular area of a total image or draw around the entire image. now there's a dashed box around the area i want to make clickable. > double click to open the Area Settings dialog

4) click web site in the Area Settings dialog > enter the website URL > Apply > OK

(Go back to original image and make Certain i have saved it in the same destination folder as the one i plan to save my image map file. i have found that all files Must be in the same folder or the end result will lack visibility of the image/will have only a border/box but is still functional)

5) click the floppy disc icon > open the folder where i saved the original image > remove the extension of the original image ... for example: should be changed to: > click save

6) if not already open i go to the folder where i saved my original image and my image map ( then i > click to open the .map file (this opens in notepad)

7) with notepad open > click file > click save as (or save, i forget) > save the file as: image.html

8) (i use firefox) a file with the firefox icon is now in this folder > i click on the firefox/HTML file then it open in a firefox browser > i click on the image & i'm taken to the target website.

Now, these are my questions:

in the Area Settings dialog > what does checking or not checking the "Relative link" do?
a) what is the > Target frame name/ID: (optional - used for FRAMES only) do? when/why would i want/need to use this?
b) Alt text (optional) i think this is just to add a description someplace

how do i use the rectangle tab in the Area Settings dialog?

how do i use the JavaScript tab in the Area Settings dialog?

also, how do i use the other aspects/tools/functions of the Image Map? i have tried the help menu on the Gimp menu bar but this doesn't lead to any useful help. i have also tried Google search, Youtube, Ehow & other sites for tutorials &/or instructions to no avail. what i have found has been rather incomplete, incorrect or plain ambiguous.

**i (need) would like to be able to have the image i have made clickable turn a different color or become highlighted when the mouse hovers over the area ~ can you explain how i go about adding such an effect or point me toward a video tutorial?**

in order to insert the clickable image into my website do i simply select the .hmtl file of the image & add it to my url or html of the back office of my website? (um. ya. my partner does that stuff. so, i'm not even sure i'm asking the right question. but i hope you get the gist of what i'm trying to ask).

i know this is wicked long and a quite involved request for assistance and as always i Really Really appreciate your time!! someday when i know more about Gimp, i will, of course, take time to help others. i am very grateful for this community & cannot thank everyone enough!

any links to further info/video tutorials about this tool are greatly appreciated as well as any info you can lend me here Blush thanx again!!!
Find all posts by this user
Quote this message in a reply
Apr 13, 2012, 23:11 (This post was last modified: Apr 13, 2012 23:15 by ofnuts.)
Post: #2
RE: Filters>Web>Image Map
ImageMaps are mostly a thing of the past (a.k.a. Web 1.0), but if you want to use them I suggest you check HTML tutorials or HTML help sites because most of the questions you ask are really HTML-related (for instance, relative links, alt text, JavaScript) and have little to do with Gimp even if this plug-in gives you some capacity to output HTML. The only really useful output of the plug-in is the point coordinates in the map. Everything else can be done by hand with an editor by someone who knows HTML.

About the Gimp stuff:

- Flatten doesn't remove transparency, it merges the layers. If these layers have transparent areas in common, the final result will be transparent in that area. But flatten should never be used. Flattening the image is always a bad idea because un-flattening the image is often impossible. When you save the image as a JPG, GIF or PNG, it is automatically flattened anyway, so as long as you keep the XCF format around, keep it with separate layers.

- Semi-flatten is a hack to give a seemingly correct border to GIF images. But even more than imagemaps, GIFs are a thing of the past, use PNGs for everything which is not photography or scanned stuff.

- The ImageMap filter shows a single layer, so if your image is made of several layers you have to combine them. But as said above, don't flatten. Better use "Layer/New from visible" that will make a new layer with the full image in it. You can discard it later.

Writing HTML is programming. Writing JavaScript is programing. One doesn't learn programming by watching video tutorials. You aren't learning a gesture but a frame of mind. Tutorials are like road directions, as long are you are on track they are fine, but if you miss a direction change (or if the road isn't exactly the one in the roadbook) you are utterly lost. And when you write code, there are thousand of ways to err (every character in the source code can generate an error). So you have bette rlearn quickly how to get back on track by your own means. So, one learns programming by reading. Books, obviously, but also other people's code. And it's easy to read HTML and Javacript, just find the "View page source" menu in you navigator (or install the Firebug extension to Firefox).

Now answering your questions on
Visit this user's website Find all posts by this user
Quote this message in a reply
Apr 14, 2012, 02:14
Post: #3
RE: Filters>Web>Image Map
Thank you so very very much for explaining all of this to me. I am very New to computers. I just started really using a computer for more than surfing the net about 1 & 1/2 yrs ago.

I used computers in college but that was 10 yrs ago and mostly just used 'em for writing papers. so, all this html, javascript & graphic stuff is Very new to me.

i agree, as of course is logical, that reading books would be best to learn html. i was asking for links to tutorials about how to better use the image map plug-in & not how to write html etc. (just so you know i'm not a total nitwit). but since you've explained to me that image maps are obsolete i believe my quest shall end here.

my partner knows html - suppose i should leave such things to him ~ for the time being at least. i just thought i could be helpful to him by making images for our website that are already clickable. oh well.

thank you for the Gimp info it's very helpful Smile and i really appreciate your time
Find all posts by this user
Quote this message in a reply
Apr 14, 2012, 02:48
Post: #4
RE: Filters>Web>Image Map
ps. why doesn't Gimp remove this dinosaur of a plug-in? ~ just wondering
Find all posts by this user
Quote this message in a reply
Post Reply 

Possibly Related Threads...
Thread: Author Replies: Views: Last Post
  Image centering for printing okfhp 1 227 Aug 23, 2017 17:51
Last Post: ofnuts
  "Open Image" change default folder and thumbnail view? Dave001 1 171 Aug 15, 2017 19:56
Last Post: ofnuts
  How to wrap paragraph text in an image arun67 0 151 Aug 12, 2017 12:46
Last Post: arun67
  Combining gif image to static image help? littlegreendog 1 189 Jul 26, 2017 12:27
Last Post: ythgilb
  Image color vs color picker YalithKBK 1 211 Jul 7, 2017 11:45
Last Post: ythgilb

Forum Jump:

GIMP ForumPortalArchiveContactTermsRSS