теги привязки и карты изображений - PullRequest
Новая
       11

теги привязки и карты изображений

0 голосов
/ 07 января 2010

как я могу связать тег привязки с картами изображений?

Предположим, я наведите курсор мыши на тег привязки, он должен выбрать область на изображении.

Примерно так http://myffi.biz/. Это во флэш-памяти, но можно ли это сделать с помощью карт изображений? Вы наведите курсор мыши на ссылки, и он должен выбрать отображенную область на изображении.

Возможно ли это? Я надеюсь, что я ясен

1 Ответ

4 голосов
/ 07 января 2010

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

<ul class="region">
    <li><a href="#" id="europe">Europe</a></li>
    <li><a href="#" id="asia">Asia</a></li>
    <li><a href="#" id="africa">Africa</a></li>
    <li><a href="#" id="australia">Australia</a></li>
</ul>
<div id="region-map">
    <div id="region-overlay"></div>
</div>

А в CSS вы определяете region-map как фон, в котором не выделены области, а в region-overlay выбраны другие области. 

#region-map, #region-overlay {
    width: 640px;
    height: 320px;
}

#region-map {
    background: url(map-base.jpg) 0 0 no-repeat;
}

#region-overlay.europe {
    background: url(map-europe.jpg) 0 0 no-repeat;
}

#region-overlay.asia {
    background: url(map-asia.jpg) 0 0 no-repeat;
}

#region-overlay.africa {
    background: url(map-africa.jpg) 0 0 no-repeat;
}

#region-overlay.australia {
    background: url(map-australia.jpg) 0 0 no-repeat;
}

И необходимый код jQuery: 

$(function() {
    $('ul.region a').hover(function() {
        // Get the current region
        var region = $(this).attr('id');
        // Hide the current overlay, change it's map and change it back.
        $('#region-overlay').fadeOut(200, function() {
            $(this).attr('class', region).fadeIn(200);
        });
    }, function() {
        // Hide the overlay
        $('#region-overlay').fadeOut(200);
    });
});

Это не идеально, но вы должны начать.

Рабочий пример можно найти по адресу:

http://www.ulmanen.fi/stuff/hovermap/

...