Creating irregular shaped HTML links with image maps?

Question

I have to create this strange honeycomb style navigation and ideally when a use hovers each 'honeycomb', it'll change color. Maybe a transparent orange overlay or something.

I made a somewhat working JS Fiddle, but don't know how I can highlight the shapes on hover. I haven't seen image maps used in a long time, but that's the only solution I know of. Are there other, more modern solutions?

http://jsfiddle.net/dmathisen/v9wZV/

Note: this only works on a wide screen. I have no idea how I'll handle this in smaller displays, but I guess that's for future me to worry about.

Is there a better way to accomplish this other than using an image map?

<map id="honeycomb" name="honeycomb">
    <area shape="poly" alt="" title="" coords="493,23,572,65,573,159,491,204,415,158,415,67" href="" target="" />
    <area shape="poly" alt="" title="" coords="651,22,732,66,732,158,652,203,574,158,573,66" href="" target="" />
    ...
</map>

Answer 1

Possible with Your Image and Pure CSS, with Some Caveats

If you utilize your existing background image and do some overlays of semi-transparent colors, then you can get it to work like...

THIS FIDDLE SHOWS

Which uses this...

HTML

<div class="home-banner home-banner-matrix">
    <div class="matrix-links">
        <a href="#">One</a>
        <a href="#">Two</a>
        <a href="#">Three</a>
        <a href="#">Four</a>
        <a href="#">Five</a>
        <a href="#">Six</a>
        <a href="#">Seven</a>
        <a href="#">Eight</a>
        <a href="#">Nine</a>
    </div>
</div>

CSS

.home-banner {
    position: relative;
    color: #fff;
    text-align: center;
}

.home-banner-matrix {
    position: relative;
    height: 372px;
    background: #000 url(https://dl.dropboxusercontent.com/u/104402909/home-img-matrix.jpg) no-repeat 50% 50%;
}
.matrix-links {
    width: 805px;
    margin: 0 auto;
    padding: 67px 0 0 30px;
}

.matrix-links > a {
    position: relative;
    display: block;
    width: 158px;
    height: 92px;
    z-index: 0;
    float: left;
    margin: 0 0 45px 1px;
    text-decoration: none;
    color: #fff;
    line-height: 92px;
    font-size: 14px;
}

.matrix-links > a:nth-of-type(6) {
    margin-left: 81px;
}

.matrix-links > a:hover {
    text-decoration: none;
    background: rgba(255,255,0,.1);
    color: #C7612C;
}

.matrix-links > a:hover:before {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    width: 0;
    height: 0;
    border-width: 44px 79px 0;
    border-color: rgba(255,255,0,.1) transparent transparent transparent;
    border-style: solid;
    z-index: -1;
}

.matrix-links > a:hover:after {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 0;
    width: 0;
    height: 0;
    border-width: 0 79px 44px;
    border-color: transparent transparent rgba(255,255,0,.1) transparent;
    border-style: solid;
    z-index: -1;
}

The main caveats are:

1. You need to work to make sure even at small screen sizes, the element line up with your background image (I have not completely adjusted for that in my fiddle example).
2. You cannot get a "perfect" hover (note how you must get past the top/bottom of a previously hovered hex before the next one will engage). This is because the pseudo-elements are still rectangular in shape, even if transparent at points, and thus still engage the hover if over that transparent area.
3. There is a limitation on the amount of text you could put.
4. This is obviously CSS3, so it is not supported in earlier browsers.

So it still may be best to pursue a SVG or image map solution, but as a proof of concept, you can get something of what you desire (though limited) with pure CSS.

Answer 2

Image maps are, in my humble opinion, as awesome as they ever were. To be clear, they suffer from the exact same problems as they always have, which is to say that it's easy to use them to create a website which is absolutely unacceptable from a usability and assistive technology standpoint.

So, avoid any such thing when possible - if it is just to look good, the usability advice is "don't - your users don't give a damn".

With this tremendous caveat - that users simply could not care less how 'cool' your navigation looks in 99.9%+ of cases - we shall hereafter assume that you know this and you have a valid use case.

For me, I've used advanced, rich image maps to duplicate application requirements that otherwise would require flash or native mobile application development - since these are vastly less assistive technology friendly than image maps ever were, it makes sense to use ever-lovin' image maps.

For rich, low-pain image maps I cannot more heavily recommend a JQuery Plugin called ImageMapster. It turns imagemaps, with their built-in support for rather arbitrarily complex polygons and near-universal browser support, and selectively improves them to support layering of images, rollovers, grouping (select one hot spot to trigger behavior in other hotspots), etc. I've used this for mapping, directory, theater seat mapping, etc.

It works beautifully across browsers (very old browsers don't always support a certain graphic feature, but it usually degrades painlessly), mobile devices, and is pretty painless to use. It uses HTML5 Canvas technology when supported, or falls back automagically to VML and other rendering techniques to get the job done for browsers that don't support the requested features.