Meracl ImageMap Generator is a FREE program which with ease lets you make clickable images - so called image maps. Easy imagemap generator for images with the ability to click on any part of a an image and have either a new window open and a redirect to the URL of your choice or to have it open in the same window... A Honey Bear Playhomes tip...

  • 1
  • Idea
  • Updated 7 years ago
I had this on my alternate site for the better part of 4 years and why I didn't add it here yet I have no idea...

Meracl ImageMap Generator is a FREE program which with ease lets you make clickable images - so called image maps. Easy imagemap generator for images with the ability to click on any part of a an image and have either a new window open and a redirect to the URL of your choice or to have it open in the same window.

1) Download the file here and install to your computer mimg.zip

2) After the install click on "Start" then "All Programs" then "Mercacl ImageMap Generator" then "Mercacl ImageMap Generator"

The program will open

3) Click "File"

4) Click "New image map"

5) Click " Load image from hard drive"

6) Locate the image you wish to turn into an image map and then click "Open" Your image will appear in the imagemap generator editor

On the right side of the screen you will see a circle, triangle and a square (these denote the shape of the target area)

7) Click on and drag a shape onto the spot you wish to have a imagemap (To enlarge/reduce the size of the imagemap just click once in the shape and you will see four dots (for the square). Just left click on one or all and drag in and out to re-size) The triangle tool will allow you to make complex shapes. Just drag the triangle tool to your image and by left clicking and dropping the first two dots around and then right clicking where you need others you conect them all and that forms a invisible button once you place the URL in the box. The circle tool is quite simple to re-size.

8) With all four dots visible look in the upper right corner and paste the URL of the site or page you wish to link to.

9) In the "Frame target" box select either

_blank = Open in new tab
_parent = Open in same tab
_self = Open in same tab
_top = Open in same tab

After you have inserted all your imagemap points and URLs

10) Click "File"

11) Click "Save image map"

12) Click "Copy HTML to clipboard"

13) Open wordpad or notepad

14) Right click in the empty text document and click "Paste"

15) Locate in the first line of code the name of the image you used as your imagemap. "yourimage.jpg"

16) Include the following before your file name "resources/"

From this

IMG SRC = "yourimage.jpg" USEMAP = "#1" BORDER = "0">

To this

IMG SRC = "resources/yourimage.jpg" USEMAP = "#1" BORDER = "0">

17) Upload the image you used to make your imagemap to your file manager

18) Highlight all your edited code

19) In your site editor drag an HTML widget onto your page and paste the code inside then click "OK"

20 Update your site and your new imagemap should be there to test...

When you mouse over the locations that you added the shapes you should see the little hand appear and once you click you will be brought to the URL page that you entered into the imagemap creator.

This side of it with using only one image is quite easy but it is when one begins to do image swapping like the imagemap of the USA that I just did here is where you begin to require more than a rudimentary knowledge. It is best left until you get a better grasp of coding.

If after you learn how to do imagemaps with only one image and get bored you can always look at my source code for the page above and try your hand at it. Sorry to say that there won't be support on the multiple images imagemap as it is too labor intensive. I got my feet wet first before I ever jumped into something so challenging...

Happy site building
Ed

If the lady bears don’t find you handsome they should at least find you handy...Don't forget to share the bear....

Honey Bear Playhomes Tips and Favs in one place... A Honey bear Playhomes Tip ;)
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2582 Posts
  • 279 Reply Likes

Posted 7 years ago

  • 1

There are no replies.