Пропустить навигацию

Замена изображения методом SWF

08.03.2007 , ,

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>

На сайте разработчиков приведены несколько примером, демонстрирующих данный метод в действии

Там же приведена и инструкция по установке и настройке данного метода. Приведу ее кратко:

  1. Скачать swfIR (11.89 KB)
  2. Загружаем оба файла swfir.js и swfir.swf в корень сайта
  3. Между тэгами <head> и </head> 
    <script type="text/javascript" src="swfir.js">
</script>
  4. Эффекты добавляются в скрипте, так же как и указываются изображения, к которым применять данные эффекты след образом: 
     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
  5. Экспериментируем и наслаждаемся результатами ))

Ограничения:

  • Resizing/zooming в Opera приводит к зависанию браузера.
  • Сначала грузится картинка, только потом скрипт заменяет ее на стилизованную.
  • При замене изображения alt текст не сохраняется.
  • Правый клик мышью не работает.
  • Не работает с hot-linked изображениями из-за ограничения безопасности в flash.

Источники: