Уроки HTML

Увеличение картинки при наведении курсора мышки html

В этом уроке будут показано, как сделать так, что бы при наведении курсора мышки на картинку она увеличивалась.
Суть простая – выводим картинку с какими-то определёнными параметрами размера. Далее нужно знать что существует два события:

onmouseover="" и onmouseout=""
В первом, внутри кавычек, указываем размеры картинки, но большие, чем изначально.
Во втором нужно указать те же размеры, что и изначально.

<img width="47" height="46" src="images//htmlhrefimg.png"
 title="Увеличение"
 onmouseover="this.width=64;this.height=64"
 onmouseout="this.width=47;this.height=46">

Но как вы, наверняка, заметили при увеличении картинки - сдвигается весь контент страницы.

Для устранения этой проблемы существует простое ("оригинальное") решение.
Создать таблицу и создать в ней ячейку, которая будет чуть больше увеличенной картинки, и, собственно, загрузить в эту ячейку нужную картинку

<table border="1" cellspacing="4" cellpadding="12">
<tr>
<td  align="center" width="78" height="102" >
<img  width="47" height="46" src="images//htmlhrefimg.png"
title="Увеличение"
onmouseover="this.width=74;this.height=74"
onmouseout="this.width=47;this.height=46"></td>
</tr>
</table>

Есть и другой способ увеличения элемента и о нём вы можете вычитать их этого урока по CSS.
Так же это можно сделать с помощью JQuery-технологий, но начинающиим подобное может показаться слишком "высокими технологииями".

◄ Предыдущий урок

Содержание

Следующий урок ►