+ Ответить в теме
Показано с 1 по 3 из 3

Тема: Как сделать зависимость одного изображения от другого?

  1. #1
    Новичок Yurii_P на пути к лучшему Аватар для Yurii_P
    Регистрация
    08.09.2019
    Сообщений
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Как сделать зависимость одного изображения от другого?

    Здравствуйте. Создаю сайт на html и css. Сайт- полный не стандарт. Те: структура сайта- соты. На сайте имеется 12 маленьких сот, и одна большая сота. Все соты расположены в разных местах. На данный момент получилось сделать, чтобы маленькие соты меняли свой цвет при наведении непосредственно на них (собственно для каждой из сот сделал 2 картинку, которая заменяется) с помощью: "omnoseover" и "omnoseout".
    Теперь необходимо сделать еще одну зависимость, уже с большой сотой. Те., необходимо сделать следующую последовательность:
    "Мышка пользователя" - "маленькая сота" - "маленькая сота меняет цвет" - "замена картинки на большой соте".
    Собственно, как, и с помощью чего можно сделать последнее - "замена картинки на большой соте", когда мышка пользователя сайта на маленькой соте?

    Код html маленькой соты:
    <div class="container">
    <a href="catalog.html">
    <img src="img/sota_catalog.png"width="247"height="214"
    onmouseover="this.src='img/sota_catalog2.png'; this.width=247;this.height=214;"
    onmouseout="this.src='img/sota_catalog.png'; this.width=247;this.height=214;"
    alt="catalog" class="sota1">
    </a>

    Код html большой соты:
    <div class="container">
    <img src="img/sota_main1.png"
    width="614"height="532"
    alt="sotamain" class="sotam">
    </div>

    Очень надеюсь на Вашу помощь. Спасибо.

  2. #2
    Местный Degradator скоро придёт к известности Аватар для Degradator
    Регистрация
    02.07.2012
    Сообщений
    2,048
    Thanks
    141
    Thanked 152 Times in 152 Posts
    <html>
    <body>
    <div class="container">
    <img src="img/sota_catalog.png" width="247" height="214"
    onmouseover="onNodeHover(event)" data-hover="sota_catalog2.png" data-leave="sota_catalog.png"
    onmouseout="onNodeLeave(event)">
    <img src="img/sota_main1.png" id="large_node" width="614"height="532" alt="sotamain" class="sotam">
    </div>

    <script>
    var largeNode = document.getElementById('large_node');

    function onNodeHover(e) {
    var smallNode = e.target;
    var source = smallNode.getAttribute('data-hover');
    smallNode.src = '/img/' + source;
    largeNode.src = '/img/' + source;
    }
    function onNodeLeave(e) {
    var smallNode = e.target;
    var source = smallNode.getAttribute('data-leave');
    smallNode.src = '/img/' + source;
    largeNode.src = '/img/' + source;
    }
    </script>
    </body>
    </html>

  3. The Following User Says Thank You to Degradator For This Useful Post:

    Yurii_P (11.09.2019)

  4. #3
    Новичок Yurii_P на пути к лучшему Аватар для Yurii_P
    Регистрация
    08.09.2019
    Сообщений
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Спасибо большое за ответ. Пробую, но пока как-то не получается, возможно что-то не туда пишу.. Если не сложно, не могли бы чуть подробнее(с пояснением) написать, что куда и как записывать?

+ Ответить в теме

Похожие темы

  1. Ответов: 3
    Последнее сообщение: 16.11.2014, 16:09
  2. Ответов: 7
    Последнее сообщение: 16.04.2012, 17:10
  3. Ответов: 2
    Последнее сообщение: 05.06.2011, 22:08
  4. Ответов: 1
    Последнее сообщение: 03.12.2010, 08:03
  5. Ответов: 1
    Последнее сообщение: 13.04.2010, 17:02

Социальные закладки

Социальные закладки

Ваши права

  • Вы не можете создавать новые темы
  • Вы не можете отвечать в темах
  • Вы не можете прикреплять вложения
  • Вы не можете редактировать свои сообщения