Как вы решаете какую картиинку просмотреть, когда серфите какую-нибудь галлерею? Больше чем уеверн, что нажмете на ту, которая больше всего вам приглянулась. И вы примите это решение в считанные секунды. А если у картинки есть подпись, да еще и если она(подпись) понравилась, то точно откроете пригланувшуюся вам картинку 
И так, к чему я все это веду? А вот к чему…
Честно говоря, на создание такой маленькой галлереии меня побудил сайт Design Shack. Там как ращ то, что я и говорил: изображение и подпись. Только подпись весьма оригинально сделано, она пояляется при наведении на изображение.
Ну что ж, это непроблема реализовать.
И так, наша цель сделать изображение, при наведении на которое будет появляется описание поверх этого изображения. Описание будет появляется в прозрачном div‘е. Для начала нам требуется отрендорить наши изображения. Дедаем это следующим образом:
<ul> <li> <a href="i/image1_normal.jpg"> <img src="i/image1.jpg" alt="Пример картинки" /> </a> </li> /* и так далее */ </ul>
Теперь создаем стили для нашего списка:
ul
{
margin:0px;
padding:0px;
}
li
{
list-style-type:none;
float:left;
margin:15px;
position:relative;
padding:0px;
}
li img
{
border:0px;
}
li a
{
display:block;
}
Таким образом, мы создали наипростейшую галлерею. Добавим к картинкам div с описанием:
<ul> <li> <a href="i/image1_normal.jpg"> <img src="i/image1.jpg" alt="Пример картинки" /> <div class="hint"> <div>MotivNo Добавлена 02.09.2008</div> </div> </a><a href="i/image1_normal.jpg"> </a></li> /* и так далее */</ul>
Как видите, у нас появился div с классом hint. Это собственно иесть подпись. Теперь применияем к нему стили:
.hint
{
/* позиционирование и размеры */
position:absolute;
width:100%; height:50px;
top:70px; left:0px;
/* отступы */
margin:0px; padding:0px;
/* шрифт */
font-family:Arial; font-size:10px;
color:#ffffff;
text-decoration:none;
/* фон */
background-color:Black;
opacity: .5;
filter: alpha(opacity=50);
/* остальное */
display:none;
cursor:pointer;
}
. hint div
{
padding: 10px;
}
Тут есть некоторые нюансы:
1-ое.Мы применяем к нашему блоку position:absolute с тем, а к списку с изображениями position:relative - это нам нужно для того, что подпись повлялась именно внизу ищображения, не где-то там еще.
2-ое. Фону мы делаем прозрачность - эо чисто из космнтических целей. Мне кажется, что так красивее будет
3-е. Естественно прячем этот блок путем display:none.
Осталось только написать пару строчек на JavaScript. Собственно вот они:
$().ready(function(){
$("a").mouseover(function(){
$(this).find(".hint").show(); /* при наведении показываем наш блок */
}).mouseout(function(){
$(this).find(".hint").hide(); /* прячем блок */
});
});
Пример можно посмотреть тут.
P.S единстевенным минусом, который я вижу на данный момент в таком решении то, что ресайзы должны быть все одинаковыми, иначе сотрится не аккуртано. В примере это хорошо видно. Если у кого-то будет решение данной проблемы - оставляйте комментарии
Случайные посты:
