www.seomark.ru |
Веб-дизайн и поисковая оптимизация |
|
Главная | Веб-дизайн и оптимизация сайтов | Фотолаборатория | Радиотехника | Полезные программы | Разработка сайтов | ||
Создание фотогалереи на сайте
Изображения для сайта - размещение, эффекты, прозрачностьРанее были рассмотрены различные способы подготовки изображений для интернета (см. статьи "Сжатие фотографий для интернета и электронной почты"). Следующий шаг - размещение изображений на сайте. На всякий случай, напомню основные моменты этого занимательного процесса:
Поскольку во многих случаях желательно увеличить изображение для более детального просмотра его любознательными посетителями сайта, то здесь разработчику предоставляется бездна возможностей. Рассмотрим некоторые простые способы "развертывания картинки". 1. Самый простой - использование миниатюры (уменьшенного изображения) в качестве ссылки на основной файл большого размера. Иногда для подсказки добавляют атрибут title="Увеличить (1000 Мб)" с предупреждением, если загружаемый файл несколько великоват. Действующий пример показан справа, его код следующий: Данный способ вывода изображения имеет множество недостатков, основной из которых состоит в том, что для возврата на страницу сайта надо закрыть вкладку с изображением. 2. Более удобно открывать картинку в отдельном окне, размером меньше, чем основное. Для этого используем ссылку в виде JavaScript следующей конструкции: 3. Последний способ часто используется для различных каталогов товаров. Щелчком мыши по изображению открывается в небольшом окне страничка с подробным описанием или техническими характеристиками изделия. Для этого в приведенном HTML-коде надо просто заменить адрес изображения на соответствующий адрес страницы описания товара и указать желаемый размер нового окна: Кроме описанных простейших приемов, разработчики сайтов применяют разнообразные эффекты при выводе изображений: плавное увеличение картинки при наведении на неё курсора, замену одного изображения на другое, изменение прозрачности и т.д. и т.п. Последний прием особенно часто используется в картинках меню (пример справа). Рассмотрим простую реализацию этого эффекта с помощью правила 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: С учетом данного безобразия создаем общее для всех браузеров правило CSS, с помощью которого мы получим изменение прозрачности (увеличение яркости) изображения-ссылки от 0,3 до 1,0 при наведении на неё курсора: Применение этого стиля не имеет каких-либо особенностей. HTML-код показанного выше примера выглядит следующим образом:
10.09.2011 г. |
||
|
||
Главная | Веб-дизайн и оптимизация сайтов | Фотолаборатория | Радиотехника | Полезные программы | Разработка сайтов | ||
Copyright © 2008 - Марк Розенталь e-mail: Перепечатка материалов сайта разрешается при условии сохранения имени автора и гиперссылки на www.seomark.ru Ключевые слова: создание сайта, прозрачность в CSS, оптимизация изображений, фотогалерея, изображения для сайта, сжатие фотографий |