Красивый метод пояснения к картинке. Используется метод CSS. На рисунке, при наведении мышкой, появляется написанное вами пояснение. При наведении, рисунок становиться темным, для эффективного контраста с появляющимся текстом. Эффект темного рисунка заранее подготавливается. Необходимо создать один рисунок, вторая половина которого, будет затемненной. Вот исходник рисунка в моём исполнении. Если, при наведении на рисунок, он не будет влезать в нужный вам формат. Исправьте код CSS предложенный ниже(поменяйте заданные размеры в коде).Устанавливаем эффект на CSS:
1.Ставим код на свою страницу между тегами <head></head>
.rollover {
width: 374px;
height: 144px;
background-image: url(rollover.jpg);
background-position: top;
font-family: Arial, Helvetica;
float: left;
}
.rollover a {
color: #fff;
width: 374px;
height: 144px;
display: block;
text-decoration: none;
}
.rollover a:hover {
background-image: url(rollover.jpg);
background-position: 0px 144px;
}
.rollover a span {
display: none;
width: 364px;
padding: 5px;
}
.rollover a:hover span {
display: block;
}
2.Код вставляемый в HTML
<div class="rollover"><a title="example titles" href="http://www.profdesigner.com/">
<span>
Ваше пояснение к рисунку
</span>
</a></div>
