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

Тема в разделе "Веб-дизайн", создана пользователем Tarasishe, 9 июн 2008.

Статус темы:
Закрыта.
Модераторы: zek24
  1. Tarasishe

    Tarasishe

    Регистр.:
    26 апр 2008
    Сообщения:
    190
    Симпатии:
    142
    Как реализовать выделение области при наведении курсора?

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

    Вопрос, возможно ли … сделать, что б при наведении курсора менялось 2 и более картинок?
    Пока только сумел сделать замену одной…
    PHP:
    <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>
     

    Вложения:

    • ukraine.gif
      ukraine.gif
      Размер файла:
      11,9 КБ
      Просмотров:
      31
  2. DangerD

    DangerD Постоялец

    Регистр.:
    2 июл 2007
    Сообщения:
    71
    Симпатии:
    13
    А если реализовать на флеше?
     
  3. Tarasishe

    Tarasishe

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

    DangerD Постоялец

    Регистр.:
    2 июл 2007
    Сообщения:
    71
    Симпатии:
    13
    Сделай так, серая карта это бекграунд, а при наведении появляются gif картинки с прозрачными краями.
     
    Tarasishe нравится это.
  5. Tarasishe

    Tarasishe

    Регистр.:
    26 апр 2008
    Сообщения:
    190
    Симпатии:
    142
    Начал делать и опять проблема....
    - каким образом сделать ссылки (области) что б на них можно было наводить и кликать, они в свою очередь меняли цвет (картинку) ?
     
  6. Simpson

    Simpson

    Регистр.:
    22 июл 2007
    Сообщения:
    373
    Симпатии:
    36
    Нужно копать в сторону 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>

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

    Janine

    Регистр.:
    17 дек 2007
    Сообщения:
    348
    Симпатии:
    96
    А как сделать, чтобы при наведении или нажатии на конкретную область выводилась информация в заданном блоке, к примеру внизу этой карты. Т.е., например телефоны представительсвта в этой области.
    Нашел похожее решение при помощи jQuery, но почему-то не работает.
     
  8. Eihwaz

    Eihwaz

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

    Вложения:

    • raphael.rar
      Размер файла:
      78,1 КБ
      Просмотров:
      33
    Janine нравится это.
  9. Janine

    Janine

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

    Eihwaz

    Регистр.:
    7 окт 2007
    Сообщения:
    156
    Симпатии:
    54
    Вы используете какой-нибудь javascript фреймворк? Это проще решается на jQuery, без него нужно писать собственную функцию для IE для поддержки getElementsByClassName:
    HTML:
    
    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;
    И замените весь скрипт ниже до закрывающей скобки (};) на этот:
    HTML:
    
    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);
    }
    
     
    Janine нравится это.
Статус темы:
Закрыта.