Увеличение изображения при наведении курсора мыши на миниатюру

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

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

Как всегда, для реализации такого эффекта на странице сайта, необходимо выполнить несколько простых операций. В нашем случае это:

• Скачать учебный материал и распаковать полученный архив в текущую папку на компьютере.
• Подготовить свои изображения и разместить их в папке img. Изображения можно сделать с одинаковыми размерами, можно попробовать другие варианты. Возможности для импровизаций не ограничены.
• Далее нужно прописать стили. Можно скопировать содержимое файла style.css и вставить в раздел head между тегами <style type="text/css"> </style>, либо так и оставить стили в отдельной папке css и сделать ссылку на неё, как сделано в моем учебном материале.

Если Вы решили вставлять стили непосредственно на страницу сайта, тогда ниже приведенный код нужно добавить в раздел head вашей страницы:

<style type="text/css"> 
/* Если ваше изображение не связано ссылкой с другой страницей, 
оставьте ссылку в виде <a href="#nogo"> 
Иначе увеличитель не будет работать в IE6 */

.ienlarger 
{
float: left;
clear: none; /* Можно установить none, left или right по необходимости */
padding-bottom: 5px; /* Расстояние между миниатюрами. Лучше не трогать данное поле */
padding-right: 5px; /* Расстояние между миниатюрами и окружающим текстом */
}

.ienlarger a 
{ 
display: block;
text-decoration: none;
/* Если добавить правило cursor: default;, то отключится курсор в виде руки */
}

.ienlarger a:hover    /* Желательно не изменять тип позиционирования */
{ 
position: relative;
}

.ienlarger span img 
{
border: 0px solid #FFFFFF;   /* Добавляем рамку вокруг изображения */
margin-bottom: 5px;    /* Сдвигаем текст вниз от изображения */
}

.ienlarger a span   /* Для большого изображения и названия */
{	
position: absolute;
display: none;
color: #FFCC00; /* Текст названия */
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px; /* Размер шрифта названия */
background-color: #000000;
font-weight: bold;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}

.ienlarger img    /* Для IE, чтобы не было рамки вокруг ссылки */
{ 
border-width: 0;
}

.ienlarger a:hover span 
{ 
display: block;
top: 50px;   /* Большое изображение выскакивает вниз на 50px от миниатюры */
left: 50px;   /* Большое изображение выскакивает вправо на 90px от миниатюры */
z-index: 100;
/* Если добавить правило cursor: default;, то отключится курсор
 в виде руки на большом изображении */
}

.resize_thumb 
{
width: 120px; /* Вводим нужный размер миниатюры здесь */
height : auto;
}

.maincontainer 
{ 
width: 75%; 
margin: 15px auto; 
}

</style>

А этот код, соответственно, вставляйте в раздел body в определенное вами место:

  
<div class="maincontainer">
<div class="ienlarger"><a href="//site.ru/">
<img src="img/01.jpg" alt="Кристина Агиллера" class="resize_thumb"><span>
<img src="img/01.jpg" alt="large"><br>
Кристина Агиллера</span></a></div>

  
<div class="ienlarger"><a href="//site.ru/">
<img src="img/02.jpg" alt="Шакира" class="resize_thumb"><span>
<img src="img/02.jpg" alt="large"><br>
Шакира</span></a></div>


<div class="ienlarger"><a href="#nogo">
<img src="img/03.jpg" alt="Бритни Спирс" class="resize_thumb"><span>
<img src="img/03.jpg" alt="large"><br>
Бритни Спирс</span></a></div>

  
<div class="ienlarger"><a href="#nogo">
<img src="img/04.jpg" alt="Николь Кидман" class="resize_thumb"><span>
<img src="img/04.jpg" alt="large"><br>
Николь Кидман</span></a></div>

          Таким цветом отмечены адреса ссылок. Помимо всего, и малые и большие изображения работают как баннеры. Не забывайте про #nogo, если Вы не желаете вставлять какую-либо ссылку.

          Пути к файлам ваших изображений.

На этом всё. Изучайте, внедряйте, тем более, что это совсем не сложно. Успехов! Ваш Л.М.