Иногда при разработке страницы возникает вопрос: как сделать так, что бы небольшое изображение при наведении на него курсора увеличивалось до строго определённого размера? На самом деле, это довольно просто, попробуем разобраться!
Иногда при разработке страницы возникает вопрос: как сделать так, что бы небольшое изображение при наведении на него курсора увеличивалось до строго определённого размера? На самом деле, это довольно просто! Так как это должно работать на стороне "клиента", то необходимо прибегнуть к простому скрипту на языке JavaScript, вставляемому прямо в тег img в качестве значения свойств onmouseover и onmouseout, название которых говорит само за себя: первое срабатывает при наведения курсора мыши на изображение, второе - после того, как курсор его покидает. Выглядит это примерно так:
<img src="/images/img.jpg"
style="width: 400px; height: 225px"
onmouseover="this.style.width='650px'; this.style.height='442px'; irc.style.display='none'"
onmouseout="this.style.width='400px'; this.style.height='225px'; irc.style.display='inline-block'"
alt='альтернативный текст'
title='текст для title' />
Обратите внимание: данный код обычно записывают в виде одной строки, здесь он приведён в таком варианте просто для удобства визуального восприятия.
В начале, как обычно, указан адрес изображения (src). Далее при помощи стилей (style), прописываемых непосредственно в теге, указан размер изображения, которое показывается при открытии страницы.
Свойство onmouseover при наведении курсора запустит код
this.style.width='650px'; this.style.height='365px'; irc.style.display='none'
в результате чего изображение увеличится до указанного размера (650px*442px), но как только курсор мыши выйдет за пределы поля с изображением, свойство onmouseout вернёт его к изначальному виду (400px*270px):
this.style.width='400px'; this.style.height='270px'; irc.style.display='inline-block'
При указании изменённого размера для свойства onmouseover не забудьте проверить точность соотношения сторон: например, если в указанном примере соотношение ширины и высоты равно 400/225=1,777 (классическое соотношение 16:9), то для изменённого варианта оно будет 650/1,777=365, т.е. 650px*365px; если это правило не соблюдать, то на изображении могут появиться неприятные искажения.
Если в пределах увеличенного изображения находятся другие элементы, которое оно должно перекрыть, используйте для изображения дополнительное свойство z-index с увеличенным значением.