вторник, 20 декабря 2011 г.

Zoom галерея изображений

Если у вас фото-блог или вы хотите ссылки на ваши сообщения в блоге оформить в виде картинок, которые увеличиваются при наведении мыши, есть вариант Zoom Галереи Изображений для установки в Blogger.

Итак, для того, чтобы добавить на свою страницу галерею изображений, как в этом блоге, зайдите в Дизайн, добавьте Гаджет HTML/JavaScript, установите его под заголовком блога. В гаджет добавьте этот код:

<style type="text/css">
 .st {
 width:100px;
 border:3px solid #BBBBBB;
 }
 .st:hover {
 width:120px;
 margin-bottom:-26px;
 }
 </style>
 <center><div style="padding:25px;">
<a href="url-ссылки#1"><img class="st" src="url-картинки#1" title="название#1"/></a>
<a href="url-ссылки#2"><img class="st" src="url-картинки#2" title="название#2"/></a>
<a href="url-ссылки#3"><img class="st" src="url-картинки#3" title="название#3"/></a>
<a href="url-ссылки#4"><img class="st" src="url-картинки#4" title="название#4"/></a>
</div></center>

Всё, что выделено жирным шрифтом, можно изменять.
Первое значение - это ширина изображения в пикселях.
Второе - цвет обводки картинки.
Третье - ширина изображения при наведении мыши на картинку.

Далее идут url-ссылки,  url-картинки,  название. Эти значения вам неоходимо установить. Где, url-ссылки - ссылка на нужную страницу, url-картинки - ссылка на саму картинку, название - заголовок сообщения, на который ведёт ссылка, который будет всплывать при наведении на картинку.

Этих значений можно добавить столько, сколько у вас изображений.

О гаджете HTML/JavaScript...