• Страница 1 из 1
  • 1
Форум » Веб-разработка » HTML + CSS — коды » Замена изображение при наведении на него курсора
Замена изображение при наведении на него курсора
workman
Воскресенье, 03 Января 2016 | Сообщение 1
Оффлайн
Проверенные
Сообщений:1716
Награды: 9
Всё просто. Код состоит из двух частей

Код
<div class="img_zamena"></div>
css для этого дива который будет отвечать за замену изображения при наведении
Код
.img_zamena {
  background: url("картинка1.jpg") no-repeat; /* изображение по умолчанию */
  height: 120px; /* высота изображения */
  width: 120px; /* ширина изображения */
}
.img_zamena:hover {
  background: url("картинка2.jpg") no-repeat; /* новое изображение */
  border: 2px solid #f00; // Установил красную рамку
  height: 120px; /* высота изображения */
  width: 120px; /* ширина изображения */
}
Страна: (RU)
Kosten
Воскресенье, 03 Января 2016 | Сообщение 2
Оффлайн
Администраторы
Сообщений:44342
Награды: 70
workman, но .img_zamena этот класс и будет показывать изображение, которое находится в стилях будет.
Страна: (RU)
workman
Воскресенье, 03 Января 2016 | Сообщение 3
Оффлайн
Проверенные
Сообщений:1716
Награды: 9
Цитата Kosten ()
этот класс и будет показывать изображение, которое находится в стилях будет

Но при наведении на картинку мышкой оно поменяется на указанное в hover
Страна: (RU)
Марковичь
Воскресенье, 03 Января 2016 | Сообщение 4
Оффлайн
Vip
Сообщений:65
Награды: 0
workman, но это простое увеличение, которое на форуме работать не будет.
Страна: (RU)
Kosten
Понедельник, 04 Января 2016 | Сообщение 5
Оффлайн
Администраторы
Сообщений:44342
Награды: 70
nikolla76, но для этого есть совершенно другие модули, на одном форуме не все сидят, так как там только BB коды работают, хотя нет, а как к примеру полный код плеера от ютуб можно поставить и он показывает.
Страна: (RU)
workman
Понедельник, 04 Января 2016 | Сообщение 6
Оффлайн
Проверенные
Сообщений:1716
Награды: 9
Цитата nikolla76 ()
но это простое увеличение, которое на форуме работать не будет

Вы так думаете? Нет ошибаетесь.Видимо вы не понимаете в стилях и кодах ничего ... Где вы увидели тут в коде увеличение то???
Страна: (RU)
FeStemBer
Понедельник, 04 Января 2016 | Сообщение 7
Оффлайн
Проверенные
Сообщений:355
Награды: 1
Цитата workman ()
Где вы увидели тут в коде увеличение то


Как понимаю, это исходные размеры, которые вы сами выставите.

Код
height: 120px; /* высота изображения */
  width: 120px; /* ширина изображения */
Страна: (RU)
Траст
Понедельник, 04 Января 2016 | Сообщение 8
Оффлайн
Пользователи
Сообщений:101
Награды: 0
Кто не понял, немного лекций, будет изночальное изображение, которое исходить будет от стилей. Вы на его наводите и оно изменяется, может стать больше или прокрутиться на месте.

Быстро, дешево и сердито!
Страна: (RU)
workman
Понедельник, 04 Января 2016 | Сообщение 9
Оффлайн
Проверенные
Сообщений:1716
Награды: 9
Чтобы было более разборчиво как данное работает, пришлось малость заморочиться и создать ДЕМО страничку в которой можно посмотреть как работает данные стили
Страна: (RU)
Форум » Веб-разработка » HTML + CSS — коды » Замена изображение при наведении на него курсора
  • Страница 1 из 1
  • 1
Поиск: