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

Вид для печати

08.09.2019, 10:41
Yurii_P

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

Здравствуйте. Создаю сайт на 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>

Очень надеюсь на Вашу помощь. Спасибо.
09.09.2019, 10:32
Degradator
```
<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>
```
11.09.2019, 09:22
Yurii_P

Спасибо большое за ответ. Пробую, но пока как-то не получается, возможно что-то не туда пишу.. Если не сложно, не могли бы чуть подробнее(с пояснением) написать, что куда и как записывать?