Я тут задумал такую штуку сделать. Ббкод для сравнения двух похожих картинок (например, это могут быть скриншоты из фильма, сделанные на одном и том же кадре для сравнения качества видео - популярно на трекерах). Для этого конечно есть сервисы, но это надо открывать другую страницу, ждать...
В общем реализация у меня получилась очень негибкая.
Код: Выделить всё
<div class="compare" style="background:url({URL}) 0 0 no-repeat; width:600px; height:400px;"></div>
в content.css прописать
Код: Выделить всё
.compare:hover {
background-position: 100% 0 !important;
}
Чтобы это работало, нужно составить две картинки размером 600x400 в одну так, чтобы получилось 1200x400. Тогда при наведении на картинку она будет съезжать в сторону, создавая иллюзию замены её другой картинкой.
Проблема в том, что этот прием строго ограничен размером картинки. Как бы получить сначала реальный размер картинки, а уже от него считать размер дива в 50%? Тут кстати ещё и для вертикальных и горизонтальных картинок разный ббкод придется делать(
В принципе можно сделать двумя картинками, но спрайтом как-то круче.
Добавлено спустя 41 минуту 32 секунды:
Re: [FAQ] Пользовательские BBCode
В общем более-менее удобный вариант:
Использование BBCode
Замена HTML
Код: Выделить всё
<span id="compare-i">
<span class="first-image"><img src="{URL1}" /></span>
<span class="second-image"><img src="{URL2}" /></span>
</span>
Код: Выделить всё
#compare-i .first-image {
display: inline;
}
#compare-i .second-image {
display: none;
}
#compare-i:hover .second-image {
display: inline !important;
}
#compare-i:hover .first-image {
display: none !important;
}
Чтобы было понятнее -
[compare=прямая ссылка на картинку]прямая ссылка на другую картинку[/compare] Естественно, картинки должны быть одинакового размера. Пользуйтесь ;)
).
