Как реализовать выделение области при наведении курсора?

[Tarasishe]

Как реализовать выделение области при наведении курсора?

Собственно имеется карту Украины, необходимо, что б при навидении на область она становилась красной… проблема в том, что области пересекаются, т.е. заменой картинки при наведении не везде получится…

Вопрос, возможно ли … сделать, что б при наведении курсора менялось 2 и более картинок?
Пока только сумел сделать замену одной…

<a href="#"onmouseover="changeImages('m1', 'images/map9-over.gif'); 
return true;"
onmouseout="changeImages('m1', 'images/map9.gif'); return true;"
onmousedown="changeImages('m1', 'images/map9-over.gif'); return true;"
onmouseup="changeImages('m1', 'images/map9-over.gif'); return true;"> 
<img src="images/map9.gif"></a>

 

[DangerD]

А если реализовать на флеше?

 

[Tarasishe]

Да, на самом деле это решение...НО с flash вообще не знаком :-( по этой причине и ищу способ перекрытия что ли... замены сразу нескольких изображений...

 

[DangerD]

Сделай так, серая карта это бекграунд, а при наведении появляются gif картинки с прозрачными краями.

 

[Tarasishe]

Начал делать и опять проблема....
- каким образом сделать ссылки (области) что б на них можно было наводить и кликать, они в свою очередь меняли цвет (картинку) ?

 

[Simpson]

Нужно копать в сторону ImageMap
В DreamWeaver-е это очень просто делается.
Код получается примерно такой:

<img src="картинка.jpg" width="101" height="60" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area shape="poly" coords="21,30,54,14,80,33,37,54" href="#" />
</map>

можно наводить и кликать.

 

[Janine]

А как сделать, чтобы при наведении или нажатии на конкретную область выводилась информация в заданном блоке, к примеру внизу этой карты. Т.е., например телефоны представительсвта в этой области.
Нашел похожее решение при помощи jQuery, но почему-то не работает.

 

[Eihwaz]

Флеш по-моему, не очень хорошее решение, с поисковисками у него ведь до сих пор проблемы.
Карты изображений неплохой вариант, но если использовать эффекты с наведением, то нужно будет рисовать несколько картинок карты в каждом из состояний (т.е., просто карта, мышь не наведена ни на одну область, карты, где мышь наведена на одну из областей (область подсвечена цветом)).
Мне нравится решение, которое пока никто почему-то не предложил: использовать векторную графику. Библиотека raphael, насколько я знаю, кроссбраузерная, так что проблем с отображением быть не должно, по-идее.
Готовое решение в аттаче.

 

[Janine]

Отличное решение!
А как сделать так, чтобы при нажатии курсором на интересующую нас область, в окошке оставалоась информация именно об этой области. Т.к. в данной реализации, если отвести мышку - она цепляет по дороге соседние области и в окошке остается информация об одной из "пограничных" областей, т.е. о той, которую последней коснулся курсор.
Буду благодарен за подсказку.

 

[Eihwaz]

Вы используете какой-нибудь javascript фреймворк? Это проще решается на jQuery, без него нужно писать собственную функцию для IE для поддержки getElementsByClassName:

if (document.getElementsByClassName == undefined) {
    document.getElementsByClassName = function(className) {
        var hasClassName = new RegExp("(?:^|\\s)" + className + "(?:$|\\s)");
        var allElements = document.getElementsByTagName("*");
        var results = [];
        var element;
        for (var i = 0; (element = allElements[i]) != null; i++) {
            var elementClass = element.className;
            if (elementClass && elementClass.indexOf(className) != -1 && hasClassName.test(elementClass))
                results.push(element);
        }
        return results;
    }
}

Далее найдите var current = null;
И замените весь скрипт ниже до закрывающей скобки (};) на этот:

var current = null;
var currentDescription;
var oblasty;
for (var oblast in ukraine) {
    (function (ob, oblast) {
        ob[0].style.cursor = "pointer";
        ob[0].onmouseover = function () {
            current && ukraine[current].animate({fill: "#DDDDDD", stroke: "#B1B1B1"}, 500);
            ob.animate({fill: "#007BA8", stroke: "#ccc"}, 500);
            ob.toFront();
            R.safari();
            current = oblast;
        };
        ob[0].onmouseout = function () {
            ob.animate({fill: "#DDDDDD", stroke: "#B1B1B1"}, 500);
            ob.toFront();
            R.safari();
        };
        ob[0].onclick = function () {
            current = (current != null ? current : 'kievskaya');
            oblasty = document.getElementsByClassName('oblast');
            for(var i = 0; i < oblasty.length; i++) {
                oblasty[i].style.display = '';
            }
            document.getElementById(current).style.display = 'block';
            return false;
        };
        if (oblast == "kievskaya") {
            ob[0].onclick();
        }
    })(ukraine[oblast], oblast);
}