www.seomark.ru
Обзоры интересных и полезных программ, фотография, радио, веб-дизайн и т.д. и т.п. и др. и пр.
Фотолаборатория
Простые эффекты вывода изображений на сайте
При выводе изображений на странице сайта обычно размещают небольшие миниатюры, которые можно увеличить при наведении курсора или кликом мыши. Оптимальным и настоятельно рекомендуемым вариантом для этого является использование плагинов jQuery, о которых рассказывалось ранее (см., например, статью "Увеличение изображений. Плагин Nivo Zoom"). Однако в некоторых случаях вполне можно обойтись простыми командами JavaScript. Рассмотрим некоторые из них.
Увеличение/уменьшение изображений при наведении курсора
Для этого достаточно использовать следующий код:
<img src="img_small.jpg" alt="Описание картинки".
onmouseover="this.src='img_big.jpg';"
onmouseout="this.src='img_small.jpg';" />
Здесь img_small.jpg и img_big.jpg - соответственно уменьшенное и увеличенное изображения. Выглядит такой эффект увеличения следующим образом:
Как видим, при увеличении картинки текст сдвигается, а само увеличение/уменьшение происходит резко, но это вполне искупается простотой метода.
Еще проще можно реализовать этот эффект, используя только одно изображение, а размеры уменьшенной и увеличенной картинки прописать непосредственно в скрипте. Для двукратного увеличения это делается так:
<img src="scripts/image_small.jpg" alt="Описание картинки" border="0"
onmouseover="this.width=320;this.height=214;"
onmouseout="this.width=160;this.height=107;" />
Такой способ позволяет легко менять масштаб увеличения, но качество увеличенной картинки немного хуже, чем при использовании двух изображений. Для его улучшения можно использовать в качестве миниатюры большое изображение (image_big.jpg), принудительно задав необходимые уменьшенные размеры:
<img src="image_big.jpg" alt="Описание картинки" border="0" width="160" height="107"
onmouseover="this.width=320;this.height=214;"
onmouseout="this.width=160;this.height=107;" />
Увеличение/уменьшение изображений кликом мыши
Этот эффект реализуется аналогично предыдущему, только с использованием обработчика onclick. При щелчке мышью картинка увеличивается, а при выводе курсора с неё возвращается к начальным размерам. Соответствующий код и пример показан ниже:
<img src="image_small.jpg" alt="Описание картинки" border="0"
onclick="this.src='image_big.jpg';"
onmouseout="this.src='image_small.jpg';" />
Если же вы хотите уменьшать картинку также кликом мыши, то потребуется небольшой код на JavaScript, который надо разместить внутри тега <head>...</head>:
<script type="text/javascript">.
var bigsize = "214"; //Размер большой картинки
var smallsize = "107"; //Размер маленькой картинки
function changeSizeImage(im) {
if(im.height == bigsize) im.height = smallsize;
else im.height = bigsize;
}
</script>
Таким образом, по первому клику мыши изображение увеличивается в 2 раза (height=214), а по второму возвращается к исходному размеру (height=107):
<img src="image_small.jpg" height="107" onclick="changeSizeImage(this)" />
Обратите внимание, что размер маленькой картинки надо задавать реальный (в нашем случае height="107"), а большой может быть произвольным в зависимости от желаемого увеличения.
Повторю, что описанные простейшие эффекты увеличения/уменьшения изображений вызывают смещение текста и не позволяют делать плавное зуммирование, что ограничивает их применение на сайте. Значительно лучше выглядит зуммирование с помощью плагинов jQuery, о чем подробно рассказано в статье "Увеличение изображений. Плагин Nivo Zoom").
6.12.2013 г.
Copyright © 2008 - Марк Розенталь e-mail:
Перепечатка материалов сайта разрешается при условии сохранения имени автора и гиперссылки на www.seomark.ru