Просмотр изображений в отдельном окне

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

С помощью CSS и HTML-кода при наведении курсора мыши на миниатюру происходит её увеличение и показ в новом окне. Такое же действие происходит и при наведении мыши на ссылку в предложении.

Установка на сайт

1. Пропишем стили. Код в таблице внизу вставить в раздел head или файл стилей сайта:

<style type="text/css">
.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 60px; /*position where enlarged image should offset horizontally */

}

</style>

2. А этот код скопируйте и расположите в разделе body:

<p class="red">Наведите курсор мыши на ссылки в предложении ниже:</p>
<p>Кроме того, для улучшения устойчивости во время полёта, повышения наибольших скорости и грузоподъёмности применяют дополнительные крылья.</p>
<p>Например, это применяется на вертолете <a class="thumbnail" href="#">Ми-6<span><img src="img/mi-6.jpg" alt=""><br>Вертолет Ми-6</span></a>.</p> 

<p>Частично этот прием имеет место на <a class="thumbnail" href="#">Ми-24<span><img src="img/mi-24-2.jpg" alt=""><br>Вертолет Ми-24</span></a>. У этого вертолёта роль дополнительных крыльев выполняют пилоны подвесного оружия.</p>


<br><br>
<a class="thumbnail" href="#"><img src="img/mi-24-min.jpg" width="100px" height="66px" border="0" alt=""><span><img src="img/mi-24.jpg" alt=""><br>Вертолет Ми-24</span></a>
    
<a class="thumbnail" href="#"><img src="img/ka-50-min.jpg" width="100px" height="66px" border="0" alt=""><span><img src="img/ka-50.jpg" alt=""><br>Вертолет Ка-50</span></a>

Демо-изображения:

Сохраните эти изображения в папку img, которая должна находиться в одной директории с файлом, в котором находится код эффекта. Проверьте корректность работы эффекта.

Подберите свои изображения, вставьте в папку img, впишите их названия и размеры.

Помимо всего, увеличенные картинки могут выполнять роль баннеров, если Вы в коде body пропишете URL-лы ваших страниц (заполните параметр href="#") с рекламой или какого-либо другого направления.

Спасибо за внимание. Посещайте мой сайт. Удачи! Пока! L.M.