Вернуться   Дизайнерский форум » ВЕБ-ПРОГРАММИРОВАНИЕ » HTML, CSS, JavaScript

Проблема с использованием CSS Sprites

Обсуждение темы Проблема с использованием CSS Sprites в разделе HTML, CSS, JavaScript, часть категории ВЕБ-ПРОГРАММИРОВАНИЕ; В сети очень много информации о том как использовать css sprites, но в примерах не хватает детализации. Задача: при наведении мышой на картинку ...


Закрытая тема
 
Опции темы
Старый 23.12.2009, 15:55   #1
В сети очень много информации о том как использовать 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> не пропадает
Изображения
Тип файла: jpg 2pic_in_1.JPG (45.2 Кб, 6 просмотров)
 
Старый 23.12.2009, 15:55
Ссылки
Старый 23.12.2009, 16:20   #2
Код HTML:
a {background: url(Ссылка) right 0px no-repeat; width: 34px; height: 30px; float: left}
a:hover {background: url(Ссылка) right -30px no-repeat;}
<a href="#"></a>
размеры естественно ваши
 
Старый 23.12.2009, 16:31   #3
вот, картинку только нормально вырезать
Вложения
Тип файла: zip a.zip (6.9 Кб, 2 просмотров)
 
Старый 23.12.2009, 16:43   #4
Поясню:

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

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

Nimans в приведенном вами коде где будет находиться Картинки № 1 , №2 ?
 
Старый 23.12.2009, 16:53   #5
Уточню
Цитата:
Картинки № 1 - картинка-ссылка, которая будет отображаться без наведения мыши

Картинки № 2 - картинка-ссылка, которая будет отображаться с наведением мыши
смысл ссылки на первой, ведь при наведение линк изменится.
То что вы описали можно реализовать двумя блоками, с display: none и display: block; соответственно при хавере display меняется, а фон можно спрайтом задать для обоих.
 
Старый 23.12.2009, 16:53   #6
Цитата:
Сообщение от Eugen2k Посмотреть сообщение
1) для этого необходимо создать один файл, в котором будет 2 картинки
Цитата:
Сообщение от Eugen2k Посмотреть сообщение
Nimans в приведенном вами коде где будет находиться Картинки № 1 , №2 ?
картинка 1 но в первом варианте показывается часть 1 (50%) а во втором варианте показывает часть 2( остальные 50%)
 
Старый 23.12.2009, 17:19   #7
Спасибо, всем господа!

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;}
 
Старый 23.12.2009, 17:22   #8
Все что угодно и куда угодно можете.
Только ie6 поддерживает a:hover, а все остальное ему плохо дается, для решения этой проблемы есть файлик htc
 
Старый 23.12.2009, 17:25   #9
Nimans, а что за htc файлик и что там должно быть? )

А то все-таки IE 6 еще очень распространен
 
Старый 23.12.2009, 17:26   #10
http://www.xs4all.nl/~peterned/scripts/csshover.htc
кинуть файлик в каталог, а в стилях прописать behavior: url("csshover.htc")
 
Старый 23.12.2009, 17:26
Закрытая тема




Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Требуется разработать карту с использованием Google API sanchez911 Вакансии 4 17.08.2011 13:02
Проблемы с кодом рамки построенной с использованием z-index marinka906090 HTML, CSS, JavaScript 15 06.05.2011 14:09
Проблема с Ssi aisanse ASP, Perl, PHP и MySQL 1 31.03.2005 10:06
Интернет проект с использованием php? moUse_ HTML, CSS, JavaScript 9 29.12.2004 13:26
Проблема vision Зал дебютантов 1 21.11.2003 22:56


Текущее время: 22:40. Часовой пояс GMT +4.

Реклама на форуме Условия размещения рекламы
Биржа ссылок Заработай на сайте!
Дизайнерский форум