Today I decided it was time I learned (or re-learned, I did it once before) how to make an image map. I searched the web for options and GIMP seemed to be the best one to go for as I use it for my image editing.
Here is the result:
Click the Place You Want To Go To
How To Make The Image Map
- Open an Image in GIMP
- Resize so that it fits on your web page – if your CMS auto-shrinks image this will screw it up (I think). I made mine 480px to be sure it would fit nicely
- Go to Filters > Web > Image Map
- Choose your shape – in the above example I just used rectangles.
- Use the mouse to place your shape. If using circle, start in the centre of the circle area.
- Once the shape is made, double click. This opens a box where you can add the URL (or other link) in the Link Tab and a onmouseover message in the Javascript tab.
- Once all shapes and URLs are added select View > Source
- Copy the source and paste into your website. Add the image URL where it says “<img src=”Untitled” width=”480″ height=”600″ border=”0″ usemap=”#map” />”
- If using WordPress you can upload an image to the Media Library and take the URL from there, or upload to the page and then strip out all other code to get the image path URL.
- Publish.
Problems and Annoyances
- The image map code below the image it creates a blank space which looks naff. Trying to find a solution to this. >>> I have moved the code to the bottom of the article, will see if WordPress has a post/page level footer insert plugin ….
- I am struggling to get the onmouseover working. Solution / workaround:
- In WordPress use title=”” instead of onmouseover=”” to show text on hover.
- Some WordPress themes break image maps, e.g. Webologist usually uses Magazine Basic, but the position of the image if off line. Now using Twenty Twelve, which is a bit naff tbh.