| ||||||||||
|
Просмотр изображений в отдельном окнеИнформация, представленная на этой странице ориентирована в первую очередь для начинающих 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. |
|||||||||
|