What’s an image map?  Its a code applied to an image to make sections of it clickable when mouse-ed or rolled over.  areas. Like this…( fingers-crossed)

 

KimB Blog | About Bean | Facebook | Twitter | Bean Blog | Image Map

 

If I did this right, when you mouse over the image above your mouse cursor should changed to a pointy finger and notes to the location you would go to will appear. Clicking should take you there too.  In this code version the links are also running along the bottom. If this works I will tell you how I did it. If it doesn’t…back to the drawing board! LOL!

Whoo HOO! Okay it worked! Yippee!

Have you seen these great siggies out there in forums that have all this clickable  info? Do you want one? 

So I made the image above in Photoshop. Its pretty big, probably too big for most forums ( 481px ×227px ) so I will be creating a smaller sized one as well.  I also made this one in PNG format, for clean lines and transparent background. Its BIG weighing in over 300kb.  Its a good first try, though. A quick check to the forums I visit to see the requirements would have been a good first start.

Here is how to do it, if you want to make your signature tag clickable.

Tutorial: Image Mapping Your Signature Tag.

1. Check forums where you are going to post your signature tag with image map for requirements.

2. Build signature tag to those requirements.

3. In your browser, open a window for each location your wish to link.

4. Upload your image to Photobucket, your website server or another photo hosting site. Keep this window open.

5. Open a window go to http://www.image-maps.com

6. Upload your image as directed by image-map.com.

7. Follow directions for mapping at image-map.com. This is where having your location windows open will really help. If you leave image-maps.com and come back you have to start over. So use the windows and keep the hair on your head and frustration to a minimum.

Note: I had trouble with the length of the code for the more advance image above once I got to the forums. There are limits to how many lines of code one can paste depending on each forum’s size rule. I had to drop FB Twitter Blog links to make it work.   See new tag at bottom. If you don’t want to limit your links as much as I did, keep your image names small to conserve lines of code.

8. Finish Mapping. Be sure to input a Base URL ( I used my blog) and Image URL : Remember you kept your photo host window open? Go there now and copy the direct link ( starts with http://) into the Image URL window.

9.  Get Code. Copy code to Wordpad or other similar text writer program.  Save.

13. Highlight the entire code and paste it into the source window of your blog or in the signature area of the USER CP of whatever forum you frequent to test.

14. Positive test? Congratulate Yourself.  You are Awesome!!

Smaller Image with fewer links…forum tested. Passed the code line requirement. 

  Happy Image Mapping!!

Jodiann