Вопрос по ссылкам

amnell · 06.01.2013

Доброго времени суток. Интересует вопрос, можно ли только с помощью HTML и CSS реализовать ссылку так, чтобы при наведении на нее мышью менялась картинка.

Но при этом сам текст «Главная» был бы именно текстом, а не картинкой.

файлы прикрепил.

ArhAngel · 06.01.2013

Код:

a{
    background-image: url("image1.png");
}
a:hover{
    background-image: url("image2.png");
}

в чем сложность?

tigra60 · 06.01.2013

Сложного, действительно, ничего нет.
Однако , делать так, как предложил ArhAngel - весьма порочная практика.

Смотрите, что у вас получится:
фоновая картинка ссылки image1.png загрузится вместе со всем остальным содержимым страницы, а вот image2.png - не загрузится.
Вы наводите мышью на ссылку, первая картинка добросовестно исчезает, и на месте ссылки будет пустота (ну, в вашем случае, хоть текст останется.
А где же вторая картинка? Она появится через некоторое время, как только загрузится.
Ну, если второй раз навести мышью на ссылку, все будет в порядке - картинка то уже загружена!
С современными скоростями такой эффект пропадания картинки часто малозаметен, но обольщаться не стоит.
Лучше сразу сделать правильно: спрайтом.
Объединяем две картинки в одну, назначаем ее фоновой. А при наведении изменяем позицию фоновой картинки (background-position).

При таком подходе мы получаем еще один дополнительный бонус: одна картинка, пусть даже и двойного размера, загрузится быстрее, чем две. Так что, полезно освоить эту практику и объединять несколько разных фоновых картинок в один спрайт.

HayPro · 14.01.2013

Соглашусь с [member=tigra60] и дополню: есть также вариант прелоада второй картинки безо всяких там скриптов (если уж решили не объединять две картинки в одну, например в случаях, когда картинка является повторяющимся фоном по одной оси). Для этого просто в любом месте, желательно после открытия <body>, создаете блок.

Код:

.pre1 {
position:absolute;
top:-300px;
background:url(images/cat_tag_f_hover.png);
}

Удачи.

ArhAngel · 14.01.2013

[member=HayPro], А при чем тут скрипты, просто меняется смещения бекграунда в CSS при :hover.
[member=tigra60], Благодарю за поправку, все верно, так гораздо лучше.

HayPro · 14.01.2013

ArhAngel сказал(а):
HayPro, А при чем тут скрипты, просто меняется смещения бекграунда в CSS при :hover.

Вы меня немного неправильно поняли. Я просто в свое время искал методы прелоада изображений и часто натыкался на решение скриптами и другими танцами с бубном, многие из которых, кстати, не работали в Опере. Т.е. мои слова "безо всяких там скриптов" относились не к сообщению [member=tigra60].

Вопрос по ссылкам

amnell

Новичок

Вложения

ArhAngel

Well-Known Member

tigra60

Спасатель

HayPro

Member

ArhAngel

Well-Known Member

HayPro

Member

Онлайн статистика

Статистика форума

Новые пользователи

Поделиться этой страницей