[Eugen2k]

В сети очень много информации о том как использовать css sprites, но в примерах не хватает детализации.

Задача:
при наведении мышой на картинку № 1 с ссылкой необходимо сменить Кртинку № 1 на Картинку № 2

Известно:

1) для этого необходимо создать один файл, в котором будет 2 картинки

(http://csssprites.com/results/34035d...5af/result.png)

2) Затем необходимо задать координаты картинки №1 и Картинки №2
(они мне тоже известны - см. вложение 2pic_in_1.JPG // координаты получены с помощью сервиса http://csssprites.com/ )

Координаты Картинки № 1 - background-position: 0px 0px;
Координаты Картинки № 2 - background-position: 0px -224px;


Вопрос:

Как это дело вставить в HTML ?

Использование <IMG> не помогло: картинка указанная в теге <IMG> не пропадает

[Niemans]

a {background: url(Ссылка) right 0px no-repeat; width: 34px; height: 30px; float: left}
a:hover {background: url(Ссылка) right -30px no-repeat;}
<a href="#"></a>

размеры естественно ваши

[Niemans]

вот, картинку только нормально вырезать

[Eugen2k]

Поясню:

Картинки № 1 - картинка-ссылка, которая будет отображаться без наведения мыши

Картинки № 2 - картинка-ссылка, которая будет отображаться с наведением мыши

Nimans в приведенном вами коде где будет находиться Картинки № 1 , №2 ?

[Niemans]

Уточню

Картинки № 1 - картинка-ссылка, которая будет отображаться без наведения мыши

Картинки № 2 - картинка-ссылка, которая будет отображаться с наведением мыши

смысл ссылки на первой, ведь при наведение линк изменится.
То что вы описали можно реализовать двумя блоками, с display: none и display: block; соответственно при хавере display меняется, а фон можно спрайтом задать для обоих.

[vitaly-go]

Сообщение от Eugen2k

1) для этого необходимо создать один файл, в котором будет 2 картинки

Сообщение от Eugen2k

Nimans в приведенном вами коде где будет находиться Картинки № 1 , №2 ?

картинка 1 но в первом варианте показывается часть 1 (50%) а во втором варианте показывает часть 2( остальные 50%)

[Eugen2k]

Спасибо, всем господа!

Nimas, спасибо за a.zip - очень полезно!

Последний вопрос:
Для оптимизации хотелось бы весь этот код положить в style.css.

могу ли я вместо "a" использовать "a1" или что-либо другое, чтобы иметь возможно сть использовать контейнер a для различных случаев

a {background: url(a.jpg) right 0px no-repeat; width: 247px; height: 210px; float: left}
a:hover {background: url(a.jpg) right -210px no-repeat;}

[Niemans]

Все что угодно и куда угодно можете.
Только ie6 поддерживает a:hover, а все остальное ему плохо дается, для решения этой проблемы есть файлик htc

[Eugen2k]

Nimans, а что за htc файлик и что там должно быть? )

А то все-таки IE 6 еще очень распространен

[Niemans]

http://www.xs4all.nl/~peterned/scripts/csshover.htc
кинуть файлик в каталог, а в стилях прописать behavior: url("csshover.htc")