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

Информация, представленная на этой странице ориентирована в первую очередь для начинающих web-мастеров.

1. Увеличение изображения без возврата к исходному состоянию

Особенностью этого способа является простота и то, что картинка просто увеличивается и всё, а для восстановления её размеров необходимо перезагрузить страницу.

Демо-пример:

Демонстрация увеличения изображения без возврата к исходному состоянию

Html-код:


<html>
<head>
<script type="text/javascript" language="JavaScript">
function uvelihenie()
{
uv1.width="650";
}
</script>
</head>
<body>
<img id="uv1" src="/images/xxx.jpg" width="100" alt="" onmouseover= "uvelihenie()">
</body>
</html>

Изображение поместите в папку images, его название (xxx.jpg) и желаемую ширину до (width="100") и после увеличения (uv1.width="650") пропишите в коде.

2. Увеличение изображения с возвратом к исходному состоянию

Наведите курсор мыши на картинку-превью (слева), чтобы её увеличить.

Для осуществления этого эффекта прежде всего необходимо выбрать изображения и подогнать размеры в соответствии с задачей, которую вы ставите перед собой. Я нашёл для примера фото Майданова и сохранил его в двух вариантах с разными размерами в папке img. Первое фото с размерами 30x45. Это фото до наведения курсора мыши. Второе-200x300. Оно появится при наведении. Вы, соответственно, выбираете свои размеры. Освежить в памяти процедуру смены размеров изображений можно ЗДЕСЬ.

Далее пропишем стили:


.hoverbox a .preview 
{ 
display: none; 
} 

.hoverbox a:hover .preview 
{  
display: block; 
position: absolute; 
top: -1px; 
left: -5px; 
z-index: 1;
} 
.hoverbox li 
{                  
display: inline; 
float: left;
margin: 20px; 
padding: 20px; 
position: relative; 
}

Можно подстроить некоторые параметры по своему усмотрению, например:


Расположение картинки-превью: 
float: left; (center, right)
Изменить отступы 
top: -1px;
left: -5px;
margin: 20px;
padding: 20px;
и т.д.

А код, который в окне внизу вставим в необходимое место страницы между тегами body:


<ul class="hoverbox"> 
<li> 
<a href="#"> 
<img src="img/majdanov_30.jpg" border="0" alt="majdanov"> 
<img class="preview" src="img/majdanov_200.jpg" border="0" alt="majdanov"> 
</a> 
</li> 
</ul>

Названия подготовленных заранее рисунков из папки img вставьте в строки:


<img src="img/majdanov_30.jpg" border="0" alt="majdanov">  
<img class="preview" src="img/majdanov_200.jpg" border="0" alt="majdanov">

Увеличенная картинка работает как баннер, когда Вы подставите URL рекламируемого ресурса в строку <a href="#"> кода, располагаемого в body.

Скопировав эти коды и вставив в нужные места вашей страницы сайта, Вы получите точно такую же картину, как на моей странице в примере. Не забудьте про изображения, которые у нас находятся в папке img и в аналогичной папке на сайте.

Исходники (30 кб)

Если возникают проблемы при скачивании файлов, например, через браузер, скопируйте ссылку (правая кнопка мыши → копировать адрес ссылки) и скачайте файл через Download Master.

Спасибо, что посетили мой сайт. Успехов в освоении новых высот! L.M.

Ваше мнение по материалу, изложенному на сайте

Служба поддержки