www.seomark.ru
Обзоры интересных и полезных программ, фотография, радио, веб-дизайн и т.д. и т.п. и др. и пр.

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

Логотип Софт

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

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

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

  • для вставки изображения используется одиночный тег <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 г.

Задать вопрос автору


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





Яндекс.Метрика

Copyright © 2008 - Марк Розенталь e-mail: Мой e-mail
Перепечатка материалов сайта разрешается при условии сохранения имени автора и гиперссылки на www.seomark.ru
Ключевые слова: создание сайта, прозрачность в CSS, оптимизация изображений, фотогалерея, изображения для сайта, сжатие фотографий