Подсветка областей при наведении на карту изображений.

Для того, чтобы при наведении на область карты изображений она выделилась требуется плагин imagemapster. Без него, к сожалению, этого сделать невозмоно. Увы. Но с этим плагином все просто.

Пример использования

Код для реализации

Итак. Подключаем jquery и сам плагин плагин.

<script type="text/javascript" src="jquery.1.6.1.js"></script>
<script type="text/javascript" src="jquery.imagemapster.js"></script>

После этого вставляем нашу карту изображений.

<img src="plan.png" usemap="#plan" alt="" style="border-style:none" />

<map id="plan" name="plan">
    <area id="room_1" shape="rect" alt="" coords="9,8,57,52" href="room_1" title="Маленькая квартирка" />
    <area id="room_2" shape="rect" alt="" coords="57,78,106,150" href="room_2" title="Хорошая комната" />
    <area id="room_3" shape="rect" alt="" coords="160,8,209,52" href="room_3" title="Классный офис" />
    <area id="room_4" shape="rect" alt="" coords="158,78,206,150" href="room_4" title="Стильный шоурум" />
    <area id="room_5" shape="poly" alt="" coords="108,73,110,63,117,59,125,58,126,52,121,44,112,38,114,29,116,24,124,24,132,21,146,29,152,39,143,43,133,44,132,52,133,59,139,65,135,70,123,73,117,69,112,73" href="polygon" title="Место для  переговоров" />
    <area shape="default" nohref="nohref" alt="" />
</map>

Для простоты добавления областей на карту изображений лучше всего использовать программу Mapedit

При этом для этого плагина не важно какая будет область выделена, так как плагин рисует поверх векторный объект canvas

Теперь добавляем вызов плагина imagemapster

<script>
    $('#plan').mapster({
         fillColor: '2252a9', // добавляем цвет при наведении
         fillOpacity: 0.7, // добавляем прозрачность цвета при наведении
         staticState:true // подсвечиваем выделенные области
     });
</script>

Еще можно добавить подсказки для каждой выделенной области

<script>
    $('#plan').mapster({
        fillColor: '2252a9', // добавляем цвет при наведении
        fillOpacity: 0.7, // добавляем прозрачность цвета при наведении
        staticState:true, // подсвечиваем выделенные области
        
        showToolTip: true, // указываем, что нужно показывать toolTip
        mapKey: 'id', // добавляем тот идентификатор,
                              // по которому мы будем обращаться
                             // к конктретной области area
        areas: [ // подсказка для каждой отдельной области area
            {
                key: "room_1", 
                toolTip: $("#room_1").attr('title')
            },
            {
                key: "room_2", 
                toolTip: $("#room_2").attr('title')
            },
            {
                key: "room_3", 
                toolTip: $("#room_3").attr('title')
            },
            {
                key: "room_4", 
                toolTip: $("#room_4").attr('title')
            },
            {
                key: "room_5", 
                toolTip: $("#room_5").attr('title')
            }
        ]
    });
</script>

При этом, если НЕ указать toolTip: $("#room_1").attr('title') для каждой area, то даже при showToolTip: true toolTip показываться не будет, а будет показываться обычная подсказка, если конечно она указана в атрибуте title

Полный список возможностей плагина можно посмотреть на сайте разработчиков плагина www.outsharked.com