В последнее время утилиты “расширяющие возможности” HTML с помощью флэша и Javascript становятся весьма популярны. Например sIFR, о котором в Рунете уже не мало сказано и написано. sIFR “расширяет” возможности работы с текстом и делает это вполне успешно, а вот swfIR наоборот, работает с изображениями.
С помощью swfIR можно легко и быстро масштабировать изображения, вращать их , растягивать по координатам, добавлять настраиваемые тени и рамки. Про кроссбраузерность и валидность кода я даже не упоминаю – для такого рода проектов это уже стало стандартом де-факто.
Настройка и подключение swfIR субьективно проще чем у sIFR, все что нам нужно это:
1. Скачать swfIR с офф.сайта или у меня.
2. Залить на сервер файлы swfir.js и swfir.swf в одну директорию с HTML файлом где swfIR будет использован. При желании можно заливать файлы и в другую папку, просто нужно будет указать в скрипте в какую.
3. Вызвать скрипт на странице:
<head>
<script type="text/javascript" srс="swfir.js" ></script>
</head>4. Указать нужные стили и параметры для отображения. Делать это нужно в самом конце HTML-документа подобным образом:
<script type="text/javascript">
window.onload = function()
{
var sir = new swfir();
sir.specify("border-width", "20");
sir.specify("border-color", "fff");
sir.swap("#example img");
}
</script>Список изменяемых параметров для swfIR:
- border-radius = Number
- border-width = Number
- border-color = CSS Styled Color (i.e. fc600)
- shadow-offset = Number
- shadow-angle = Number
- shadow-alpha = Number between 0 – 100
- shadow-blur-x = Number
- shadow-blur-y = Number
- shadow-strength = Number
- shadow-color = CSS Styled Color (i.e. fc600)
- shadow-quality = Number between 0 – 1
- shadow-inner = Boolean (true or false)
- shadow-knockout = Boolean (true or false)
- shadow-hide = Boolean (true or false)
- rotate = Number between -359 – 359
- overflow = expand-x, expand-y or fit
- link = String (i.e. http://www.swfir.com)
- src = String (path to your swf, if not standard)
- wmode = String (opaque, transparent, etc.)
- elasticity = String (true), Number (pixel-to-em ratio)
Для затравки приведу немного примеров: 1 – эластичная картинка, 2 – повернутая картинка в тексте, 3 – картинка с закругленными уголками, 4 – работа с несколькими картинками.
Не обошлось и без ложки дегтя:
- Форсированое масштабирование в Opera убивает браузер.
- alt не сохраняется при замене картинок через swfIR
- Контекстное меню изображений не работает.
Разработчики клятвенно обещают все исправить, ссылаясь на то что ничто не совершенно :)
В общем и целом, на фоне несомненных достоинств, в глаза бросается некоторая недоработанность проекта, мелкие шероховатости и отсутствие толковой документации, но исходя из того что это первая версия, хочется надеяться что проект будет развиваться и дальше, и все недочеты будут исправлены.
С удовольствием послушаю о вашем опыте работы с swfIR.
В Опере не работает.
вот здесь
все расписано по шагам
[quote comment="757"]вот здесь
все расписано по шагам[/quote]
А причем здесь sifr? Речь то не о нем.
опа.. сори, что-то я загнался..
а про эту фичу я не знал.. буду изучать.. ;)
garA ;)