Форум программистов
 
О проблемах, например, с регистрацией пишите сюда - alarforum@yandex.ru, проверяйте папку спам! Обязательно пройдите активизацию e-mail, а тут можно восстановить пароль.

Вернуться   Форум программистов > Web программирование > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Здесь нужно купить рекламу за 20 тыс руб в месяц! ) пишите сюда - alarforum@yandex.ru
Без учёта ботов - 20000 человек в день, 350000 в месяц.

Ответ
 
Опции темы
Старый 18.09.2020, 17:56   #1
Николай70
Новичок
Джуниор
 
Регистрация: 16.12.2019
Сообщений: 3
По умолчанию Смена картинки при наведении курсора

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

Код:
 <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>
Для одной картинки работает нормально, но мне нужно вставить на страницу несколько таких активных картинок с ссылками. Если просто менять адреса картинок, то на всех отражается только одна. Чтобы было понятно, прилагаю скан http://finetrans.ru/wp-content/uploads/2020/09/скан.jpg


Что можно сделать, чтобы на одной странице отображалось несколько разных картинок со сменой изображения при наведении курсора?
Николай70 вне форума Ответить с цитированием
Старый 19.09.2020, 21:37   #2
Blood_ghosT
Пользователь
 
Регистрация: 29.07.2011
Сообщений: 89
По умолчанию

<p><a href="#" class="rollover2"> </a></p>
<p><a href="#" class="rollover3"> </a></p>
и <style> делаете по аналогии.
Blood_ghosT вне форума Ответить с цитированием
Старый 22.09.2020, 12:58   #3
Николай70
Новичок
Джуниор
 
Регистрация: 16.12.2019
Сообщений: 3
По умолчанию

Цитата:
Сообщение от Blood_ghosT Посмотреть сообщение
<p><a href="#" class="rollover2"> </a></p>
<p><a href="#" class="rollover3"> </a></p>
и <style> делаете по аналогии.
Благодарю, Blood_ghosT, помогло.
Николай70 вне форума Ответить с цитированием
Старый 22.09.2020, 16:45   #4
Кирилица
Новичок
Джуниор
 
Регистрация: 22.09.2020
Сообщений: 10
По умолчанию

Прописала всё, как в примере. Навожу курсор, он замирает и ничего не происходит.
Проходит секунды 3, наверное, когда снова двигать могу, но картинка всё равно не увеличивается. Если отвести и навести опять, то то же самое, как решается?
Кирилица вне форума Ответить с цитированием
Старый 28.09.2020, 18:39   #5
Ottava
Форумчанин
 
Регистрация: 05.09.2017
Сообщений: 143
По умолчанию

Цитата:
Сообщение от Кирилица Посмотреть сообщение
Навожу курсор, он замирает и ничего не происходит.
Проходит секунды 3, наверное, когда снова двигать могу
Вам придётся осваивать "Инструменты разработчика" (Ctrl+Shift+i в Хроме и Ctrl+Shift+k в Firefox), чтобы понять что происходит. Можно кликнуть правой клавишей мыши над нужным элементом и выбрать "Исследовать элемент".

Скорее всего у вас синтаксическая ошибка в CSS и браузер зависает на бесконечном цикле обработки события hover.
Или вы перехватываете и обрабатываете событие onMouseOver яваскриптом (jquery), и бесконечный цикл возникает там.

Поиграйтесь с демками hover на CSS и посмотрите их коды - всё работает.

Последний раз редактировалось Ottava; 28.09.2020 в 18:42.
Ottava вне форума Ответить с цитированием
Ответ

Здесь нужно купить рекламу за 20 тыс руб в месяц! ) пишите сюда - alarforum@yandex.ru
Без учёта ботов - 20000 человек в день, 350000 в месяц.

Опции темы


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
изменение картинки при наведении курсора без JS johny_03 HTML и CSS 3 18.09.2012 18:51
Смена картинок при наведении курсора hosts JavaScript, Ajax 10 17.07.2012 16:52
Изменение картинки при наведении курсора! [BeNdeR] Мультимедиа в Delphi 22 08.05.2012 13:03
Смена картинки при наведении курсора Шсу HTML и CSS 1 26.10.2009 19:50


Проекты отопления, пеллетные котлы, бойлеры, радиаторы
интернет магазин respective.ru
Пеллетный котёл Emtas
котлы EMTAS
Здесь нужно купить рекламу за 7 тыс руб в месяц! )
пишите сюда - alarforum@yandex.ru
ИКС 840