Веб-дизайн и поисковая оптимизация

Создание фотогалереи на сайте

• Создание простой фотогалереи на сайте
• Создание фотогалереи в Photoshop
• Фотогалерея jQuery - просто и красиво!
• Фотогалерея jQuery со слайд-шоу
• Фотогалерея Lightbox с библиотекой Prototype
• Изображения для сайта - размещение, эффекты, прозрачность
• Фотогалерея для интернет магазина
• Фотогалерея prettyPhoto
• Фотогалерея Fancybox
• Увеличение изображений. Программа Highslide JS
• Создание слайд-шоу для сайта
        >> смотреть все статьи о jQuery

Изображения для сайта - размещение, эффекты, прозрачность

Ранее были рассмотрены различные способы подготовки изображений для интернета (см. статьи "Сжатие фотографий для интернета и электронной почты"). Следующий шаг - размещение изображений на сайте. На всякий случай, напомню основные моменты этого занимательного процесса:

• для вставки изображения используется одиночный тег <img > с атрибутами src="адрес изображения" alt="Описание изображения" width="ширина" height="высота";
• кроме того, дополнительно используют атрибуты для выравнивания текста относительно изображения - align, наличия и ширины рамки - border, отступов (пустого пространства вокруг изображения) по горизонтали - hspace и вертикали - vspace;
• если вы хотите, чтобы при наведении указателя мыши на картинку появлялся поясняющий текст, то используйте атрибут title. Так как в некоторых браузерах в этом случае появляется содержимое тега alt, то лучше прописывать оба тега одинаково;
• изображения на сайте могут служить гиперссылкой. Для этого достаточно поместить тег <img > внутрь контейнера <a href="адрес ссылки"><img src="ххх" alt="ххх" width="ххх" height="ххх" /></a>.

Поскольку во многих случаях желательно увеличить изображение для более детального просмотра его любознательными посетителями сайта, то здесь разработчику предоставляется бездна возможностей. Рассмотрим некоторые простые способы "развертывания картинки".

 1. Самый простой - использование миниатюры (уменьшенного изображения) в качестве ссылки на основной файл большого размера. Иногда для подсказки добавляют атрибут title="Увеличить (1000 Мб)" с предупреждением, если загружаемый файл несколько великоват. Действующий пример показан справа, его код следующий:
<a href="picture_library/seobig.png" target="_blank"><img src="picture_library/seosmall.gif" alt="Фото для сайта" width="50" height="50" hspace="5" border="0" align="right" title="Увеличить (3 Кб)" /></a>.
Атрибут border="0" необходим для того, чтобы вокруг картинки не возникало безобразной рамки, указывающей на то, что это ссылка.

Данный способ вывода изображения имеет множество недостатков, основной из которых состоит в том, что для возврата на страницу сайта надо закрыть вкладку с изображением.

  2. Более удобно открывать картинку в отдельном окне, размером меньше, чем основное. Для этого используем ссылку в виде JavaScript следующей конструкции:
<a href="javascript:" title="Увеличить (3 Кб)" onclick="window.open('picture_library/seobig.png','','width=610, height=610, left=5, top=5'); return true;"><img src="picture_library/seosmall.gif" alt="Логотип" width="50" height="50" /> </a>
Для корректного вывода изображения необходимо указать в параметрах onclick ширину нового окна (лучше на 5-10 пикселей больше основного изображения) и его расположение на экране монитора. В данном случае width=610, height=610, left=5, top=5, что соответствует выводу картинки размером 600х600 пикселей в левом верхнем углу экрана с отступом 5 пикселей.

  3. Последний способ часто используется для различных каталогов товаров. Щелчком мыши по изображению открывается в небольшом окне страничка с подробным описанием или техническими характеристиками изделия. Для этого в приведенном HTML-коде надо просто заменить адрес изображения на соответствующий адрес страницы описания товара и указать желаемый размер нового окна:
onclick="window.open('адрес страницы описания','','width=ххх, height=ххх, left=5, top=5'); return true;".

Кроме описанных простейших приемов, разработчики сайтов применяют разнообразные эффекты при выводе изображений: плавное увеличение картинки при наведении на неё курсора, замену одного изображения на другое, изменение прозрачности и т.д. и т.п. Последний прием особенно часто используется в картинках меню (пример справа).

Рассмотрим простую реализацию этого эффекта с помощью правила CSS opacity (прозрачность). Для задания прозрачности элементов страницы данный параметр должен иметь значение в диапазоне от 0.0 до 1.0. При значении равном нулю элемент становится полностью прозрачным, а при значении равном единице, соответственно, совсем непрозрачным.

Вроде бы всё замечательно, но... не во всех браузерах. В Opera, Firefox, Chrome, Mozilla, Safari никаких проблем не возникает, а наш "любимый" браузер Internet Explorer (must die), как всегда, не понимает такого простого указания прозрачности через opacity. Начиная с версии 5.5 он реализует прозрачность через Alpha DirectX фильтр, который использует значение прозрачности в диапазоне от 0 до 100 (а не от 0.0 до 1.0). Поэтому специально для IE надо использовать следующую формулировку правила CSS:
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=значение от 0 до 100).

С учетом данного безобразия создаем общее для всех браузеров правило CSS, с помощью которого мы получим изменение прозрачности (увеличение яркости) изображения-ссылки от 0,3 до 1,0 при наведении на неё курсора:
<style type="text/css">
a:hover img {
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
opacity: 1.0;
}
.filter {
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=30);
opacity: 0.3;
}
</style>

Применение этого стиля не имеет каких-либо особенностей. HTML-код показанного выше примера выглядит следующим образом:
<a href="imgsite.html" ><img src="picture_library/seosmall.gif" alt="Фото для сайта" width="50" height="50" hspace="5" border="0" class="filter" align="right" title="" /></a>.

10.09.2011 г.

Ещё статьи по теме "Полезные мелочи веб-дизайна":
• Создание иконки для сайта
• Создание гостевой книги на сайте
• Создание фона для сайта
• Вывод текущей даты на сайте
• Создание бегущей строки на сайте
• Создание "схемы проезда" на сайте
• Ключевые слова и продвижение сайта
• Создание выпадающего меню
• Сжатие фотографий для интернета и электронной почты

см. все статьи по веб-дизайну >>