UGgallery

Замена текста картинкой, обычно, применяется к заголовкам, логотипам, рекламным сообщениям и т.п. Когда нужно оформить текст сложными эффектами и нестандартными шрифтами, а средств HTML и CSS уже не хватает. Мы просто прячем текстовой элемент, а вместо него показываем картинку с теми же самыми словами, но красиво разукрашенными. При этом, HTML-код остается простым и ясным, без лишних картинок.

Наиболее популярен Image Replacement с растровой графикой, управляемой посредством CSS. Есть методы с Flash, JavaScript, PHP.

Самые практичные методы описаны в статье “Некоторые техники замены текста картинками“.

Для расширения кругозора можно почитать две обзорные статьи на английском, дополняющие друг друга: “Revised Image Replacement” и “Image Replacement. Again“.

Большинство методов — экспериментальные. Некоторые работают в одних браузерах и не работают в других. Некоторые удобнее для разработчика, некоторые — для посетителя сайта. Выберите свой метод замены текста.

Новые поступления

• Using Fewer Images
• How to use Thierry Image Placement to create graphic Menus on the fly
• Using the DOM to automate Thierry Image Placement
• Drop Caps on the fly with DOM and Thierry Image Placement
• PHP + CSS Dynamic Text Replacement (P+C DTR) + перевод на русский
• P+C DTR with word-wrapping
• SIR Image Replacement

Методы с растровой графикой

• CSS без дополнительной HTML-разметки:
  • Malarkey IR — с большим отрицательными letter-spacing
  • Модифицированный Malarkey IR
  • Phark Accessible Image Replacement + Removing Dotted Links — метод с большим отрицательными text-indent
  • Leahy/Langridge — c overflow: hidden и padding-top
  • Andreas’ List Image Replacement — замещение маркером списка
  • GIR — с CSS-генерированием контента
• CSS c дополнительной HTML-разметкой:
  • Thierry Image Placement — с прозрачным однопиксельным gif-ом
  • Gilder Levin Ryznar Jacoubsen IR
  • BIR — со span-ом и position:relative
  • Pixy — с дополнительным span-ом
• Другие:
  • JIR — с JavaScript-генерированием контента
  • Definitive Solution to Image Replacement — мощный кроссбраузерный метод
  • Dynamic Text Replacement — метод с PHP+JS от “A List Apart”

Методы с Flash

• sIFR — эффективный сложный метод для автоматической замены заголовков:
  • Подборка статей на русском
  • sIFR 2.0.2
  • sIFR 2.0, дополн.1, дополн.2
  • Documentation and FAQ
  • краткое описание на русском
  • “Как и когда использовать sIFR” — перевод с английского
• STR — SwishMAX Text Replacement — аналог sIFR-а

Дополнительные материалы

• Access Matters IR Quiz — рассмотрение методов IR с точки зрения доступности (accessibility).
• Trimming Long Outlines in Firefox — еще способы удаления некрасивой обводки у ссылок в Firefox, возникающих при использовании Phark IR. Один способ в заметке, другие — в комментариях.
• Partial Image Replacement — замещение части текста
• Image Replacement Tests — сравнительное тестирование нескольких методов
• Image (Replacement) Maps — имитация Image Maps, при помощи CSS