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

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

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

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

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

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

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

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


html css map sprite rollover
person GJD    schedule 12.07.2011    source источник

Ответы (2)


arrow_upward
1
arrow_downward

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

ДЕМО на 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> с идентификатором, соответствующим элементу usemap img, содержащему <area> элементов

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

person user56reinstatemonica8    schedule 28.08.2013

arrow_upward
0
arrow_downward

Вам нужно использовать модификатор 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. */
}
person Hossein    schedule 12.07.2011
comment
Этот ответ касается спрайтов CSS в целом - вопрос касается использования спрайтов CSS в карта изображения, которая представляет собой <img> элемент, связанный с <map> элементом, который содержит <area> элементов, определяющих интерактивные фрагменты изображения, например кликабельная хижина, гора и человек на фотографии в этой демонстрации. Это сложная проблема, потому что связанное изображение должно быть элементом <img>. - person user56reinstatemonica8; 28.08.2013