На днях «Рейтинг Комиксов» принес ссылку на перевод одного потрясного веб-комикса: Fredo & Pid'jin. Но привлек он мое внимание не только своей потрясностью, но любопытным эффектом, который не использовался ни в одном другом переводе на моей памяти.



Суть его в том, что под картинкой с переводом комикса «прячется» оригинальное изображение, которое появляется, когда читатель наводит на нее курсор. Таким образом, чтобы взглянуть на оригинал, не нужно ни только переходить на другую страницу, но даже кликать мышью, достаточно просто навести указатель на изображение.

Бывалые интернет-технологи могут сходу назвать несколько способов реализации такого эффекта. There’s more than one way to do it. Способ, который в данном случае применил переводчик Fredo & Pid'jin, могут взять на вооружение и другие переводчики, если посчитают это оправданным.

HTML-код одного выпуска комикса:

<div class="comics" style="background-image: url(http://адрес.изображения.исходного/комикса);">
<img src="http://адрес.изображения.переведенного/комикса">
</div>

В CSS (на пример, в ЖЖ есть настройка «Свой CSS») добавляем строки типа:

div.comics { text-align:center; background-position:center; background-repeat:no-repeat; }
div.comics img:hover { opacity:0; filter:alpha(opacity=0); }

Важно, чтобы исходное изображение и перевод совпадали по ширине и высоте.

Я не буду рассказывать об альтернативных подходах к реализации эффекта смены изображения при наведении курсора, тем более что едва ли это будет кому-то интересно, а просто опишу плюсы и минусы подхода описанного.

Плюсы:

1. «Pure CSS», ура! Особенно актуально для ЖЖ, который пресекает все попытки пользователя баловаться с JavaScript.
2. Даже если браузер не поддерживает используемые свойства и смены картинки не получится, пользователь все еще сможет полноценно читать перевод комикса.
3. Не требует дополнительной обработки изображений: есть оригинал, есть перевод, и больше никакого шаманства в графическом редакторе.

Минусы:

1. Лишний трафик. Оригинальные изображения будут загружаться, даже если пользователь не собирается их смотреть.
2. Сомнительное юзабилити. Пользователь не сможет свободно двигать мышь в области картинки без того, чтобы «переключить» ее на оригинал.

Пожалуй, оба минуса в большей степени актуальны для больших страничных комиксов, которые и сами по себе довольно большие, и файлы весят немало. С другой стороны, для небольших веб-комиксов типа Fredo & Pid'jin такое решение вполне оправдано и может быть только поприветствовано.