Замена изображения методом SWF
8.03.07 веб-стандарты, дизайн, javascript
swfIR (swf Image Replacement) это метод, созданный специально для снятия некоторых ограничений стандартного изображения в HTML и свойств CSS, ассоциированных с ним, сохраняя концепцию дизайна в соответствии со стандартами. При помощи JavaScript и Flash метод swfIR позволит вам добавить ряд нестандартных визуальных эффектов к любому изображению на сайте.
Кода вы добавляете изображение на сайт, вы можете прописать для него определенный стиль, примерно по такому же принципу работает и метод swfIR, добавляя тэг <span> с классом swfir, внутри которого и будет располагаться наше изображение:
Перед использованием метода swfIR
<img src="pic.jpg" alt="A picture" id="pic" />
После применения метода swfIR
<span class="swfir" id="pic"> [замененное изображение, код зависит от браузера] </span>
На сайте разработчиков приведены несколько примером, демонстрирующих данный метод в действии
- Растянутый заголовок по ширине текста, в виде изображения
- Изображение повернутое на некоторый угол
- Изображение с закругленными краями
- Несколько изображений с различными эффектами
Там же приведена и инструкция по установке и настройке данного метода. Приведу ее кратко:
- Скачать swfIR (11.89 KB)
- Загружаем оба файла swfir.js и swfir.swf в корень сайта
- Между тэгами
<head> и </head><script type="text/javascript" src="swfir.js"> </script>
- Эффекты добавляются в скрипте, так же как и указываются изображения, к которым применять данные эффекты след образом:
var borders = new swfir(); borders.specify("border-radius", "15"); borders.swap("#content img");прописываются внизу документа, примерно следующим образом:<script type="text/javascript"> window.onload = function() { var sir = new swfir(); sir.specify([parameter], [value]); //эффекты sir.specify("src", "/swfir.swf"); //» указывается если этот файл не » в корне сайта sir.swap("#example img"); // указывается id » изображение, к которому применяем эффект } </script>В скачанном архиве есть подробная документация со списком примеров и эффектов.
Список эффектов:
- border-radius
- border-width
- border-color
- shadow-offset
- shadow-angle
- shadow-alpha
- shadow-blur
- shadow-blur-x
- shadow-blur-y
- shadow-strength
- shadow-color
- shadow-quality
- shadow-inner
- shadow-knockout
- shadow-hide
- rotate
- overflow
- link
- elasticity
- Экспериментируем и наслаждаемся результатами ))
Ограничения:
- Resizing/zooming в Opera приводит к зависанию браузера.
- Сначала грузится картинка, только потом скрипт заменяет ее на стилизованную.
- При замене изображения
altтекст не сохраняется. - Правый клик мышью не работает.
- Не работает с hot-linked изображениями из-за ограничения безопасности в flash.
Источники:
- happycog.com
- swfir.com
