Карты изображения в html

Иногда требуется привязать ссылку к какой нибудь область изображения. Для этого в html существуют карты изображения. Вот пример использования карт изображений в html:

Как использовать карты изображения. Указываем у изображения атрибут usemap. Задаем описание карты тегом map, значение атрибута name у этого тега должно совпадать с usermap. Для задание активной области, которая должна быть ссылкой, используются тег area. У него есть атрибуты:
shape – форма активной области, это может быть circle (окружности), rect (прямоугольника) или poly (многоугольник)
alt -альтернативный текст
href – адрес ссылки
coords – координаты область

<img src="map.img" width="150" height="100" usemap="#map" alt="Карты изображения">
<map name="map">
    <area shape="poly" alt="меню"
       coords="50,20, 100,20, 100,30, 50,30"
       href="ссылка">
</map>

Для создания карт можно использовать редактор изображений Gimp. Для этого отрываем нужное изображение, и идем в меню: фильтры ->веб->карта изображений. Такой же инструмент есть и в PhotoShop.
Ссылка работает, но она не удобна. Активная область должна выделятся при наведении. Для этого нам потребуется картинка с прорисованной выделенной областью и несколько строк на JavaScript. Алгоритм такой: при наведении курсора на активную область меняем картинку.

<script language="JavaScript">
<!--
if (document.images) {
        image = new Image();
        image.src = "map.img";
        image_active = new Image();
        image_active.src = "map_active.jpg";
    }
    function changeImages() {
        if (document.images) {
            for (var i=0; i<changeImages.arguments.length; i+=2) {
                document[changeImages.arguments[i]].src = eval(changeImages.arguments[i+1] + ".src");
            }
         }
}
// -->

Понравилась статья? Расскажи друзьям