Это простая, CSS базовая галерея изображений, которая показывает увеличенные изображения, динамически, когда мышь располагается над ними.
Любой импровизированный HTML заголовок может быть добавлен к увеличенному изображению, и при этом смысл Галереи Изображений существует как простой HTML
на странице. Идея состоит в том, чтобы использовать “:hover” псевдо класс CSS,
чтобы заставить элемент реагировать onMouseover. Когда это происходит, показывается увеличенное изображение,
поставленное на якорь на странице другим контейнером, с набором правил от родственника.
Кроме того, вы имеете возможность изменить поведение, таким образом, что увеличенные изображения показываются только onClick, хотя IE6 в настоящее
время не очень хорошо поддерживает это поведение.
Галерея работает в IE6 +, Firefox, Опера 8 +.
На заметку: Увеличенные изображения могут “накладываться” на любое содержание,
с которым будет соприкосаться. Вы можете легко исправить накладывание только,
давая контейнеру галереи (.gallerycontainer) набор высоты исходя из наибольшего
размера изображения.
Вот код который вы можете использовать
1. пример HTML
Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Пример CSS галлереи</title>
<link rel="stylesheet" type="text/css" href="http://soft-ucoz.ucoz.ru/HTML/1/style000.css" />
</head>
<body>
<div class="gallerycontainer">
<a class="thumbnail" href=""><img src="http://soft-ucoz.ucoz.ru/HTML/1/tree_thu.jpg" width="100px" height="66px" border="0" /><span><img src="http://soft-ucoz.ucoz.ru/HTML/1/tree0000.jpg" />
Нравиться картинка?</span></a>
<a class="thumbnail" href=""><img src="http://soft-ucoz.ucoz.ru/HTML/1/ocean_th.jpg" width="100px" height="66px" border="0" /><span><img src="http://soft-ucoz.ucoz.ru/HTML/1/ocean000.jpg" />
Хотите себе на сайт?</span></a>
<a class="thumbnail" href=""><img src="http://soft-ucoz.ucoz.ru/HTML/1/sushi2_t.jpg" width="100px" height="75px" border="0" /><span><img src="http://soft-ucoz.ucoz.ru/HTML/1/sushi200.jpg" />
Будем изучать CSS?</span></a>
<a class="thumbnail" href=""><img src="http://soft-ucoz.ucoz.ru/HTML/1/horses_t.jpg" width="100px" height="70px" border="0" /><span><img src="http://soft-ucoz.ucoz.ru/HTML/1/horses00.jpg" />
Берите код себе</span></a>
<a class="thumbnail" href="">Наведите на ссылку<span><img src="http://soft-ucoz.ucoz.ru/HTML/1/dynamicd.gif" />
Всплывающая картинка</span></a>
<a class="thumbnail" href="">И ещё раз<span><img src="http://soft-ucoz.ucoz.ru/HTML/1/zoka0000.gif" />
Вот результат</span></a></p>
</p>
</p>
</p>
<h2 align="center"><a href="http://soft-ucoz.ucoz.ru/forum/3" target="_blank"><strong>Изучайте Трюки CSS-дизайна вместе со мной!</strong></a></h2>
<p align="center"> </p>
<h3><a href="http://soft-ucoz.ucoz.ru/forum/3-545-1" target="_blank">Вернуться на сайт</a></h3>
</div>
</body>
</html>
2. Пример CSS
Code
<style type=”text/css”> */эту строчку прописывайте только если
вставляете CSS код в саму HTML страницу не подключая внешний файл стилей/*.gallerycontainer{
position: relative;
}.thumbnail img{
border: 1px solid white;
margin: 0 5px 5px 0;
}.thumbnail:hover{
background-color: transparent;
}
.thumbnail:hover img{
border: 1px solid blue;
}
.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*/
visibility: visible;
top: 0;
left: 230px; /*position where enlarged image should offset horizontally */
z-index: 50;
}
</style>
