CSS-спрайты и отображение изображений - PullRequest
Новая
       27

CSS-спрайты и отображение изображений

1 голос
/ 12 июля 2011

Я пытаюсь встроить CSS-классы CSS Sprited в карту изображений.Первоначально я создал карту HTML-изображения, в которой было загружено 8 изображений:

Квадратное изображение с 7 кнопками = все серое, когда оно не наведено.7 квадратных изображений, каждое с одной кнопкой с цветом для наведения мыши.

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

Я проверял CSS-спрайты и увидел, что это будет наиболее эффективный способ добиться быстрого времени загрузки всех необходимых кнопок.

Итак ... я 'Мы создали мой CSS Sprite, однако карта изображений, кажется, позволяет мне вызывать только файлы изображений, а не классы, созданные для спрайта.Как бы я мог объединить эти две технологии, чтобы позволить мне наводить курсор на каждую кнопку и активировать соответствующий цвет на основе позиционирования CSS Sprite.

Извините, если это звучит слишком многословно или слишком запутанно.Я пытался обернуть голову вокруг этого в течение достаточно долгого времени.

Должен ли я просто отбросить идею 1 изображения на карте изображений с позиционированием и пойти с загрузкой 7 изображений CSS Sprited?

Ответы [ 2 ]

1 голос
/ 28 августа 2013

Итак, вы пытаетесь получить CSS-спрайты - фоновые изображения с регулируемыми положениями фона - работаете с элементами html <map> <area>?Сложно, но возможно.

DEMO на jsbin

Это проверено в Firefox, Chrome, Opera и Safari (август 2013 г.), а также в Internet Explorer 7, 8, 9 и 10.

Вам просто необходим <img> с невидимым , но действительным атрибутом src, который не заставляет браузер показывать значок «испорченное изображение» .

Мой предпочтительный способ заключается в следующем: прозрачный gif размером 1 на 1 пиксель, в кодировке base64, поэтому фактический файл .gif не требуется: 

src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAIC‌​RAEAOw=="

В есть несколько других предлагаемых методов.«Как правильно добавить изображение без src?» , но у всех остальных, которые я пробовал, была как минимум одна проблема.Это просто отлично работало.

Тогда это просто обычные вещи:

  • фиксированной высоты и ширины, в идеале через css
  • фоновое изображение с заданным положением фона, напримерв обычных изображениях спрайтов. Атрибут
  • * usemap, как обычно, при создании карты изображений (например, usemap="#someArea" с #, если требуется поддержка старого IE - как обычно).
  • обычный <map> элемент с идентификатором, соответствующим img 'usemap, содержащим <area> элементы

Если ваша цель - получить несколько изображений со связанными областями из разных местна том же листе спрайта вы можете столкнуться с этой проблемой: Перекрывающиеся изображения с картами изображений, мешающими друг другу .Предложенное простое решение хорошо работает с картами изображений: назначьте <map> одному полностью прозрачному изображению, как указано выше, но без фонового изображения, держите его над всеми другими изображениями, а затем разместите изображения как обычные спрайты изображений под ним.

0 голосов
/ 12 июля 2011

Вам необходимо использовать модификатор css hover: 

Somebutton {
  /* things needed to display the sprite */
  ...
  background-position: 0px -7px /* normal mode */
}

Somebutton:hover {
  /* things needed to display the sprite */
  ...
  background-position: 0px -56px /* shift the image
      49 pixels to the left to display color image. */
}
...