Смена картинки при наведении курсора

Web Frontend: JavaScript, HTML/CSS
#1

Здравствуйте. Третий день пытаюсь решить проблесу смены картинки при наведении на неё курсора. Нашёл в Инете такой рабочий код:

 <style>
   a.rollover {
    background: url(images/sun1.png); /* Путь к файлу с исходным рисунком  */
    display: block; /*  Рисунок как блочный элемент */
    width: 196px; /* Ширина рисунка */
    height: 183px; /*  Высота рисунка */
   }
   a.rollover:hover {
    background: url(images/sun2.png); /* Путь к файлу с заменяемым рисунком  */
   }
  </style>
  <p><a href="#" class="rollover"> </a></p>

Для одной картинки работает нормально, но мне нужно вставить на страницу несколько таких активных картинок с ссылками. Если просто менять адреса картинок, то на всех отражается только одна. Чтобы было понятно, прилагаю скан.

скан
скан1441×328 178 KB

Что можно сделать, чтобы на одной странице отображалось несколько разных картинок со сменой изображения при наведении курсора?

#2

А откуда ссылки берутся? Сервером генерируются или сайт статичный (то есть только HTML без серверных скриптов)?

Это скрин, если конечно вы не отпечатали страницу на принтере и не отсканировали сканером :slight_smile:

#3

Ссылки на картинки просто копирую в виде http, статичные.

#4

Ну в смысле не сами ссылки, а содержимое HTML. Это просто статичный HTML файл? Или серверным скриптом (PHP, …) генерируется?

Если статичный, то как вариант просто добавить уникальные атрибуты элементам и по ним селекторы писать (например id="myLink1" и #myLink1 вместо a.rollover, общие свойства типа display можно оставить в a.rollover).

#5

Это статичный HTML файл

#6

Вот пример: https://codepen.io/icetomcat/pen/OJNBEqw

<p class="rollover-box">
  <a href="#" class="rollover rollover_1"></a>
  <a href="#" class="rollover rollover_2"></a>
  <a href="#" class="rollover rollover_3"></a>
</p>

.rollover-box {
  display: flex;
  justify-content: center;
}
a.rollover {
  display: block;
  width: 196px;
  height: 183px;
  margin: 0 10px;
}
a.rollover.rollover_1 {
  background-color: rgba(255,0,0,1)
}
a.rollover.rollover_1:hover {
  background-color: rgba(255,0,255,1)
}
a.rollover.rollover_2 {
  background-color: rgba(0,255,0,1)
}
a.rollover.rollover_2:hover {
  background-color: rgba(0,255,255,1)
}
a.rollover.rollover_3 {
  background-color: rgba(0,0,255,1)
}
a.rollover.rollover_3:hover {
  background-color: rgba(255,255,0,1)
}

замените background-color на background со своими картинками

Вместо конкретных классов можно использовать псевдокласс :nth-child(<номер элемента>)

1 лайк
#7

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


https://fakeimg.pl/
https://dummyimage.com/ 
a.rollover.rollover_1 {
  background: url(https://picsum.photos/id/0/200/300);
}
a.rollover.rollover_1:hover {
  background: url(https://picsum.photos/id/1/200/300);
}
a.rollover.rollover_2 {
  background: url(https://picsum.photos/id/10/200/300);
}
a.rollover.rollover_2:hover {
  background: url(https://picsum.photos/id/11/200/300);
}

https://codepen.io/alexp11223/pen/yLORRxW

2 лайка
#8

Прикольно, а то мне было лень искать картинки-заглушки

#9

Никогда не понимал термин заглушка. Что под этим подразумевается?

#10

Что-нибудь вместо реальных данных, например, когда их еще нет, а функциональность тестировать надо.

dummy, placeholder на англ.

https://www.lipsum.com