Вот код:
[CODE]#pic{
background-color: #FFFFFF;
position: relative; /* Положение выставлено как relative.
Это необходимо для того, чтобы потом
абсолютно (absolute)спозиционировать
большу картинку относительно левого
верхнего угла слоя */
left: 1px;
top: 1px;
width: 100px; /* Ширина слоя = ширине миниатюры */
display: inline;
}
/* Описание стиля большой картинки */
/* Идея в том, что изображение сначала имеет размеры 1х1 и
смещено за пределы видимости слоя. */
#pic a .large {
border: 0px;
display: block;
display: inline;
height: 1px;
left: -1px;
position: absolute;
top: -1px;
width: 1px;
}
#pic a img {
border: 0;
}
/* Выставляем стиль для ссылки, которая обрамляет изображения */
#pic a.p1, #pic a.p1:visited {
background: #FFFFFF;
border: 1px solid #000000;
display: block;
display: inline;
height: 100px;
left: 0;
text-decoration: none;
top: 0;
width: 100px;
}
/* Стиль для ссылки при наведении на нее мышкой */
#pic a.p1:hover {
background-color: #FFF;
color: #000000;
text-decoration: none;
display: inline;
}
/* Стиль для большого изображения при наведении
мышки на миниатюру */
#pic a.p1:hover .large {
border: 1px solid #000000;
display: block;
display: inline;
position: absolute; /* Абослютное позиционирование
относительно слоя-контейнера */
top: -100px; /* Покажем большю картинку справа */
left: 105px; /* по центру от миниатюры */
width: 300px; /* Выставим нужные размеры большой */
height: 300px; /* картинки, потому что она была 1х1 */
z-index: 500px; /* это чтоб картинка была в 3D */
}
Просто z-index отчего-то правильно работает только в Opera, в IE нет[/CODE]
Примечание:
Опечатался, конечно без px должно быть. Только выходит ниче, в IE
Вот кусок
<div id="pic"><a class="p1" title="" href="#"><img alt="" width="100" height="100" src="/.files/zoom/barrelmini.jpg" /> <img class="large" alt="" width="300" height="300" src="/.files/zoom/barrelbig.jpg" /> </a></div>
<div id="pic"><a class="p1" title="" href="#"><img alt="" width="100" height="100" src="/.files/zoom/barrelmini.jpg" /> <img class="large" alt="" width="300" height="300" src="/.files/zoom/barrelbig.jpg" /> </a></div>
<div id="pic"><a class="p1" title="" href="#"><img alt="" width="100" height="100" src="/.files/zoom/barrelmini.jpg" /> <img class="large" alt="" width="300" height="300" src="/.files/zoom/barrelbig.jpg" /> </a></div>
<div id="pic"><a class="p1" title="" href="#"><img alt="" width="100" height="100" src="/.files/zoom/barrelmini.jpg" /> <img class="large" alt="" width="300" height="300" src="/.files/zoom/barrelbig.jpg" /> </a></div>
<div id="pic"><a class="p1" title="" href="#"><img alt="" width="100" height="100" src="/.files/zoom/barrelmini.jpg" /> <img class="large" alt="" width="300" height="300" src="/.files/zoom/barrelbig.jpg" /> </a></div>
<div></div>
<div></div>
Примечание:
Нашел ответ
http://xpoint.ru/forums/internet/html_css/css/thread/42564.xhtml
RPI.su - самая большая русскоязычная база вопросов и ответов. Наш проект был реализован как продолжение популярного сервиса otvety.google.ru, который был закрыт и удален 30 апреля 2015 года. Мы решили воскресить полезный сервис Ответы Гугл, чтобы любой человек смог публично узнать ответ на свой вопрос у интернет сообщества.
Все вопросы, добавленные на сайт ответов Google, мы скопировали и сохранили здесь. Имена старых пользователей также отображены в том виде, в котором они существовали ранее. Только нужно заново пройти регистрацию, чтобы иметь возможность задавать вопросы, или отвечать другим.
Чтобы связаться с нами по любому вопросу О САЙТЕ (реклама, сотрудничество, отзыв о сервисе), пишите на почту [email protected]. Только все общие вопросы размещайте на сайте, на них ответ по почте не предоставляется.