Как увеличить картинку при наведении?
За изменение масштаба изображения отвечает свойство transform с функцией scale() . В качестве её значения указывается число больше 1 для увеличения масштаба и меньше 1 — для уменьшения масштаба. К примеру, число 1.2 увеличивает масштаб на 20%.
Чтобы картинка увеличивалась при наведении на неё курсора мыши, свойство transform следует привязать к псевдоклассу :hover, как показано в примере 1.
Пример 1. Увеличение картинки
При наведении на картинку масштаб меняется мгновенно, поэтому для плавного увеличения изображения добавлено свойство transition , оно задаёт время масштабирования.
Если требуется масштабировать картинку, не увеличивая при этом её размеры, то каждое изображение надо поместить в . Для него задать свойство display со значением inline-block , чтобы стал размером с изображение; а также overflow со значением hidden , чтобы пряталось всё за пределами (пример 2).
Пример 2. Использование overflow
У изображений внутри строчно-блочных элементов снизу появляется небольшой отступ, его можно убрать с помощью свойства display со значением block .
См. также
- :focus на мобильных устройствах
- overflow
- transform
- Анимация ссылок при наведении
- Атрибут scroll
- Виды ссылок
- Всплывающая подсказка
- Высота и ширина в CSS
- Использование :hover
- Липкое позиционирование
- Несколько псевдоэлементов
- Нормальное позиционирование
- Ориентация
- Очистка float
- Переходы с помощью :hover
- Повёрнутые рамки
- Подробнее о позиционировании
- Подсветка строк и колонок таблицы
- Псевдокласс :hover
- Псевдоклассы в CSS
- Работа с типографикой
- Селекторы CSS
- Состояния кнопок
- Сочетание с псевдоклассами
- Типы ссылок
- Трансформация
- Трансформация
- Трансформация в CSS
- Функции трансформации
Как сделать, чтобы картинка менялась при наведении на нее курсора мыши?
Заменить одну картинку на другую при наведении на неё курсора мыши.
Решение
Смена одной картинки на другую при наведении на неё курсора мыши называется эффектом перекатывания. Обычно для создания эффекта перекатывания применяется JavaScript, но в большинстве случаев вполне достаточно и CSS.
Псевдокласс :hover
Вначале разберём, как делается собственно сам эффект. Для этой цели используется псевдокласс :hover , он добавляется к желаемому селектору. Этот псевдокласс определяет стиль элемента, когда на него наводится курсор мыши, что нам как раз и требуется. Сразу отметим, что в браузере Internet Explorer версии 6 и ниже :hover работает только со ссылками, тогда как другие браузеры понимают :hover и для других элементов. Так что для универсальности придётся помещать изображение внутрь контейнера . Сам рисунок добавляется и меняется с помощью стилевого свойства background . Алгоритм действий следующий.
- Готовятся два изображения одинакового размера, одно для исходного вида, а второе — для его замены при эффекте перекатывания.
- Исходная картинка добавляется в качестве фонового рисунка к селектору A через стилевое свойство background со значением url(URI) , здесь URI — путь к графическому файлу.
- Присоединяем псевдокласс к селектору A и снова включаем свойство background , но в качестве значения указываем замещающее изображение.
- Чтобы ссылка была по размеру картинки, её следует превратить в блочный элемент с помощью свойства display со значением block , а также задать высоту и ширину ссылки.
На рис. 1 приведены два изображения: исходное (рис. 1а) и замещающее (рис. 1б).
а 
б
Рис. 1. Картинки для создания эффекта перекатывания
Остаётся собрать весь код воедино, как показано в примере 1. Чтобы ссылка не вела на какой-то определенный файл, что в данном случае излишне, добавим «заглушку» в виде символа решетки (#) к атрибуту href тега .
Пример 1. Использование псевдокласса :hover
HTML5 CSS 2.1 IE Cr Op Sa Fx
Эффект перекатывания
Приведённый способ хотя и прост в реализации, но имеет определённый недостаток. Поскольку второй рисунок загружается только при наведении курсора на ссылку, то отображение картинки происходит с некоторой паузой. Для устранения этой задержки можно использовать не два изображения, а лишь одно.
Эффект перекатывания с одним рисунком
Казалось бы имеется противоречие, ведь эффект перекатывания состоит в замене одного рисунка на другой, как же тогда обойтись одной картинкой? На самом деле изображений будет два (рис. 2), но храниться они будут в одном графическом файле.
Рис. 2. Изображение с двумя картинками
Смена одного рисунка на другой происходит сдвигом изображения по вертикали за счёт использования универсального свойства background или background-position , как показано в примере 2.
Пример 2. Изменение положения рисунка
HTML5 CSS 2.1 IE Cr Op Sa Fx
Эффект перекатывания
Для селектора A устанавливается фоновое изображение через свойство background , ширина ( width ) совпадает с рисунком, а высота (свойство height ) равна половине высоты изображения. В итоге первоначально должна отображаться зеленая вкладка целиком.
При наведении на ссылку фон смещается вверх на половину высоты картинки (40 пикселов) с помощью background-position и становится видна оранжевая вкладка.
Как сделать, при нажатии на картинку (которая уже является ссылкой другой карт) выходила другая
Я далеко не профи, но делаю один очень хороший сайт. в том числе и для практики..
Так проблема встала в следующем. Есть картинка (1.jpg), я сделал код, чтобы при наведении курсора мышки она на время наведения курсора менялась другим изображением (2.jpg).
+ сделал , чтобы при открытии этой же картинки путем ссылки открывалась другая (3.jpg). Теперь мне нужно, чтобы когда открывается эта другая картинка (3.jpg) , при щелкании по ней , чтоб она сменялась другой картинкой (например 4.jpg . ) Проблемы бы не было, если бы просто была картинка я добавил бы соот.код и заместо нее открывалась другая, а здесь ступор т.к. картинка 3 итак является ссылкой и как сделать к этой картинке 3 еще ссылку на другую картинку не знаю.
В общем код такой:
1 2 3
a href="https://www.cyberforum.ru/images/3.jpg"> img src="https://www.cyberforum.ru/images/1.jpg" width="363" height="245" border="0" onMouseOver="src='images/2.jpg'" onMouseOut="src='images/1.jpg'">
Что нужно прописать или изменить, чтобы когда открывается картинка 3 по ней щелкаешь и она сменилась/переключилась на новую картинку (наприм. 4)
Появление и исчезновение картинки при клике по кнопке на Javascript
От одного из моих подписчиков на YouTube канале поступил достаточно интересный вопрос. Он спросил, как сделать так, чтобы при нажатии на кнопку появлялась картинка в браузере. А при повторном нажатии на кнопку, чтобы эта картинка исчезала.
Этот вопрос показался мне интересным по нескольким причинам. Во-первых – его задал человек, который совершенно не разбирается в программировании, а моя цель именно в том, чтобы помогать таким людям. Во-вторых, ответив на этот вопрос я могу одновременно раскрыть несколько тем по программированию на Javascript.
Алгоритм программы
Первое с чего нужно начинать создание любой программы – это продумать её алгоритм. То есть нужно расписать каждый шаг, который должна будет выполнить наша программа на пути к реализации поставленной задачи. А также, нужно составить алгоритм своих действий при написании программы.
Последовательность создания программы
- Создать HTML документ и поместить на него 2 объекта: картинку и кнопку.
- Создать функцию, которая будет скрывать картинку (или отображать её), если пользователь нажмёт на кнопку.
- Создать событие для кнопки onClick, которое будет вызывать нашу функцию.
Алгоритм работы программы
- Нажатие на кнопку.
- Вызов функции.
- Если картинка в браузере не отображается, то показать её.
- Если картинка видна в браузере, то спрятать её.
Вот так вот приблизительно, для себя, мы набросали что должны сделать и как будем это реализовывать. Теперь можно приступать непосредственно к программированию.
Исчезновение картинки при клике по кнопке
Для начала, сделаем так, чтобы при нажатии на кнопку картинка исчезала.
HTML
JS
function myImg()
В данном примере, при загрузке страницы в браузере, мы выводим на экран картинку Clipboard01. Для этой картинки мы указываем атрибуты id и style. С помощью document.getElementById мы получаем ссылку на элемент по его идентификатору (по ID) и меняем атрибут style на display:none. То есть делаем картинку невидимой (скрываем её отображение в браузере).
Отображение картинки при нажатии на кнопку
Теперь давайте сделаем так, чтобы при нажатии на кнопку, картинка отображалась в браузере.
HTML
JS
function myImg()
В данном примере, мы просто поменяли местами стиль отображения картинки. То есть, изначально при открытии HTML документа картинка у нас не видна (style=»display:none;»), а когда мы нажимаем на кнопку, то происходит замена display:none на display:block и картинка становится видимой.
Появление и исчезновение картинки при нажатии кнопки
Теперь, поняв как всё работает, мы можем объединить первый и второй вариант кода и написать условие, используя операторы If Then Else:
HTML
JS
function myImg() < let elem = document.getElementById('img_1'); // получаем элемент по ID let style = getComputedStyle(elem); // получаем его стили if (style.display === 'none') < document.getElementById('img_1').style.display='block'; >else if (style.display !== 'none') < document.getElementById('img_1').style.display='none'; >>В этом примере, мы изначально делаем картинку невидимой, указав style=»display:none;».
При нажатии на кнопку, мы получаем ссылку на нашу картинку по ID.
Затем, с помощью getComputedStyle получаем объект, содержащий значения всех CSS-свойств элемента (в данном случае нашей картинки).
После этого происходит проверка, если у картинки свойство display равно none (то есть, если картинка не отображается), то мы меняем его на block и тем самым выводим картинку на экран.
Если же свойство display не равно none (то есть картинка видна), то мы меняем его на none и тем самым скрываем изображение.
Обратите внимание на то, что втором условии мы выполнили проверку именно неравенства (указали НЕ равно none), хотя могли написать условие else if (style.display === ‘block’). Этот вариант тоже будет работать, но при условии что для отображения картинки мы всегда будем использовать display:block.