If you’ve ever used DreamWeaver to create an image map, then you’ll be pretty familiar with image-mapper’s interface. It’s three dead simple steps:

1. Upload your image
2. Map your image
3. Copy your code

It all happens on a single page so it’s pretty hard to get confused.

It’s made with Ruby on Rails and jQuery. And best of all, no more having to deal with DreamWeaver! Have a look for yourself.

Visit Image Mapper.

Lorem aliqua ipsum dolor sit amet, consectetur adipisicing elitsed iusmodtemporincididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation consectetur adipisicing ullamco ex­laborisnisi ut aliquipconsectetur ea commodo consequat.

instead of this…

Lorem aliqua ipsum dolor sit amet, consectetur adipisicing elitsed iusmodtempor­incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation consectetur adipisicing ullamco ex­laborisnisi ut aliquipconsectetur ea commodo consequat.

Well. Here’s a few bad ideas.

• You could add this property to your stylesheet: { word-wrap: break-word }. But it’s not uniformly supported across browsers. Believe it our not, IE is ahead of the game on this one.
• You could also keep it simple and just hardcode the hyphenation in the template. But that’s not a great solution since things can get a little weird if users start resizing their text.
• You might also try the almost totally useless <wbr> element. This forces a hyphenated word break depending on the browser’s whim. It’s never really worked consistently for me, but I’ve heard it’s sometimes useful for tables.

And now a good idea!

Use the “soft hyphen” entity – &shy;. Just drop this little beauty in the middle of your word wherever you want a hyphen and let the browser do it’s magic. If a word break is appropriate, you’ll get one. If not, our “soft hyphen” will be silently ignored. Awesome.