Как выделить область карты-изображения с помощью CSS
Выделить область карты-изображения при наведении курсора мыши простым применением псевдокласса :hover к элементу <area> Мне не удалось, поэтому пришлось прибегнуть, помимо использования псевдокласса, к позиционированию и отображению элемента <area> как блока.
Начав писать код, учитывая вышесказанное, я пришёл к выводу, что проще использовать обычные ссылки, чем загромождать документ «лишними» элементами и атрибутами, коими являются: <area>, <map>, coords, name, shape, usemap. Всё это не нужно. Причём семантика, по моему мнению, ни сколько не пострадает.
Пример
Если удалить из стилей свойство border-radius и его значение, то «курсор» изменится на прямоугольник. Также отмечу, что вместо тени (box-shadow) можно использовать любое другое оформление, например, фоновое изображение, задаваемое с помощью background.
Проверено в браузерах Google Chrome, Internet Explorer, Mozilla Firefox, Opera Next, Opera Presto, Safari.