Нижняя строка
Для содержательных изображений вы хотите, чтобы в разметке HTML была src.Вы хотите использовать решение Javascript и поместить изображение ролловера в атрибут.
Для элементов пользовательского интерфейса изображений без содержания, особенно элементов, которые являются общими для всего сайта или дублированы, лучшим вариантом будет простое решение CSS (поэтому вам не нужно повторно объявлять местоположения изображений при каждом вызове).Среди CSS-решений спрайты являются лучшими, поскольку они не требуют предварительной загрузки.
Решение Javascript
HTML:
<img src="/img/one.jpg" data-rollover="/img/two.jpg" />
В jQuery:
$(function(){
$('img.rollover').hover(function(){
var e = $(this);
e.data('originalSrc', e.attr('src'));
e.attr('src', e.attr('data-rollover'));
}, function(){
var e = $(this);
e.attr('src', e.data('originalSrc'));
}); /* a preloader could easily go here too */
});
Пример реализации: http://jsfiddle.net/dtPRM/1/
Преимущества: Это просто;это имеет смысл;он работает с минимальной дополнительной разметкой после настройки библиотеки.
Недостатки: Требуется Javascript и накладные расходы на загрузку библиотеки jQuery.
Вероятно, лучший вариант. Если ваш пользователь использует браузер, в котором релевантность ролловеров (вероятно, имеет место), у него есть возможности Javascript для запуска этой опции.Люди, которые по какой-то причине намеренно отключили Javascript, подскажут, если вы оставите небольшую заметку <noscript>, в которой говорится, что они могут не получить полный набор функций.
Решение CSS: Best
HTML:
<div id="img1" />
CSS:
div#img1 {
height: 400px;
width: 300px;
background: url('http://dummyimage.com/600x400/000/fff') no-repeat top left;}
div#img1:hover {
background-position: top right;}
Пример реализации: http://jsfiddle.net/dtPRM/5/
Лично я считаю, что для содержательных изображений это еще хужевариант, чем CSS + два решения фоновых изображений.Вы отделяете HTML-разметку от семантического значения дисплея.
Если вы используете изображения без содержания, такие как элементы пользовательского интерфейса, то, на мой взгляд, это лучшее решение.
Решение CSS: также хорошо
Доступен еще один вариант CSS, который не включает фоновые изображения (предпочтительнее среди решений CSS, если вы хотите иметь теги изображений в HTML, как длясемантически значимые изображения).
<div class="rollover">
<img class="rollover" src="http://dummyimage.com/600x400/000/fff" />
<img class="" src="http://dummyimage.com/600x400/fff/000" />
</div>
CSS (здесь я использую псевдоселектор :not, но его довольно легко избежать; я также думаю, что я получил имена классов семантически задом наперед):
div.rollover img:not(.rollover) {display: none;}
div.rollover:hover img:not(.rollover) {display: inline;}
div.rollover:hover img.rollover {display: none;}
Пример реализации: http://jsfiddle.net/dtPRM/2/
Преимущества: Семантически целесообразно по сравнению с предыдущим решением CSS помещать всю информацию в таблицу стилей.
Недостатки: Требуется посторонняя разметка.
Комментарий: Эта функция может автоматически загружаться предварительно в зависимости от того, вызывает ли ее браузер.
Итог: Достойный запасной вариант, если опция (1) недоступна, поскольку вам абсолютно необходима совместимость с IE2 или поддержка не JS.
Неразрешимость CSS: держитесь подальше
Я упоминаю это только потому, что вы упомянули это в вопросе.Я бы не стал его использовать.
HTML:
<div id="img1" />
CSS:
div#img1 {
height: 400px;
width: 600px;
background: url('http://dummyimage.com/600x400/000/fff') no-repeat top left;}
div#img1:hover {
background-image: url('http://dummyimage.com/600x400/fff/000');}
Пример реализации: http://jsfiddle.net/dtPRM/4/
Преимущества: Широко совместимы;все, что вам действительно нужно для поддержки, это фоновые изображения и наведение.
Недостатки: Семантически странно помещать изображения в CSS и централизовать их там.Делает будущие модификации более сложными.При этом, если у вас есть сценарий, который оправдывает ролловерное изображение, есть большая вероятность, что это может быть неконтентное изображение (например, элемент пользовательского интерфейса), и в этом случае CSS будет семантически (возможно) даже более подходящим, чемобычное изображение.См. Примечание по спрайтам ниже.
Другие недостатки: Вы должны быть осторожны, объявляя высоту и ширину изображения (в любом случае, это хорошая практика, но она может стать громоздкой, когда вы просто хотитечтобы добиться цели).Пользователи, просматривающие в мобильных браузерах, которые могут необычно обрабатывать фоновые изображения CSS.
Еще больше недостатков: Если вы хотите наложить на него предварительный загрузчик, вы будете использовать Javascript икаким-то образом выбирая элементы, способные к опрокидыванию, и с такой скоростью вы также можете использовать Javascript для всего.
Итог: Не используйте это для содержательных изображений. Если вы должны держаться подальше от Javascript, используйте спрайты для элементов пользовательского интерфейса и альтернативное решение для семантически значимых изображений.