The CSS Image Map Generator is Back

After a brief hiatus, our CSS Image Map Generator tool is back online. We took it offline while transitioning to the new site design and are happy to be bringing it back!

Access it here.

If you haven’t used it before, it’s an easy-to-use GUI tool to create CSS-based “image maps.” Rather than using the HTML map and area tags, it uses CSS positioning to achieve a very similar effect by layering HTML anchor (“a”) elements over an image.

The interface consists of four tabs (plus a fifth Feedback and Credits tab):

1. Upload Image – Upload the image you’d like to place links on. Once the image is uploaded successfully, you’ll automatically jump to the next tab.
2. Visual Editor – A nice, drag-and-drop interface that allows you to place your links anywhere on the image. You can move, resize, edit, and delete the link from here. Click the Pencil icon and set the link text, title, and URL. Otherwise your link will be pretty pointless!
3. Preview – Just as you’d expect, you can preview your creation here before moving on. If you’re not happy with your work, you can always click back to the Editor tab and make changes.
4. Generated Code – Provides you with ready-made HTML and CSS code that can be copied and pasted onto your website. Be sure to change the path to the image to something that makes sense on your website!

That’s all folks. If you use this tool and have some feedback for us, we’d love to hear it.