Наведение на рисунок-ссылку

Пардон, не внимательно прочел. Затер.

типа того:

<a class="button" href="#"><img src="1x1tr.gif" width="100" height="100" alt="" /></a>

Код

a.button {

    width: 100px;

    height: 100px;

    background-image: url(button1.gif);

    background-position: top left;

    background-repeat: no-repeat;

    display: block;

}

a.button:hover {

    background-image: url(button2.gif);

}

Задать соотвтетственно свои отступы для ul и li ещё

Оптимиальное решение — это совместить две картинки в одну и использовать как бэкграунд с разным смещением (background-position). Если же использовать две картинки, то в IE возможен неприятный эффект, когда это чудо будет перезагружать изображения при каждом наведении.

Если использовать img-теги, то через :hover не получится. В этом случае единственное решение — JS.

Николай В., скинь пожалуйста в личку пример или здесь покажи - интересно.

не понимаю почему не получится? я все сайты делаю так и все ок

О какой перезагрузке речь?

При этом можно задавать кроссбраузерную прозрачность и т.д.

Такие вещи только с помощью css делаются, для чего там ява не понятно. Разве что для первоначальной подзагрузки сделать. Но это уже не обязательно

покажите где у вас все норм?!!

IE6 не кэширует их! Это известная проблема!

Как надо делать:!

Код html

<a href="">&nbsp;</a>

css код

a {

text-decoration:none;

background:url(button.jpg) no-repeat top left;

display:block;

height:20px;

width:150px;

color:#ffffff;

}



a:hover {

text-decoration:none;

background-position:0 -20px;

}

Где button.jpg - это изображение в котором совмещены обычное состояние при наведении.

сверху 20px - это обычное состояние

внизу 20px - это при наведении

Пример такой картинки:

Еще плюс такого метода - получается меньше изображений (файлов) становится в 2 раза меньше, а так как ie грузит по 2 файла за раз (количество подключений), то это оч ускоряет загрузку сайта!

P.S. вот пример http://varkolak.ru/hover.html

Пример на скорую руку

CSS

Картинка

в подписи сайт, по моему методу сделаны кнопки, мне казалось что загружаются они повторно уже нормально, а для первого раза конечно нужно было сделать скриптовую подзагрузку.

Но ваш метод лучше конечно, тут я соглашусь и по весу тоже выигрыш идет.

Ну вот впринципе способов тут куча уже (по теме))

Спасибо всем, я понимаю и вроде как использовал эти методы.

Меня смущает одна вещь, как я уже писал выше. Эта картинка - ссылка. То есть это не фон к ссылке, а просто ссылка-картинка. Если я задаю бекграунд, то как сделать ссылку?

Wonka добавил 06.12.2008 в 00:25

Антон Каленик, в Вашем случае в качестве 1x1tr.gif используется прозрачный рисунок? Иначе не понимаю :(