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

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

  1. Страница загружается и имеет полноцветную карту изображений.
  2. Пользователь наводит курсор мыши на карту изображений — при входе в карту изображений все изображение становится серым. Обратите внимание, что области карты не находятся рядом с краем изображения. Изображение, которое мне нужно использовать, представляет собой изображение типа блок-схемы/рабочего процесса.
  3. Пользователь продолжает наводить курсор мыши на одну из областей карты — эта область карты становится полноцветной, а остальная часть карты остается серой.
  4. Пользователь может щелкнуть наведенную цветную область изображения, чтобы перейти на новую страницу, объясняющую часть карты изображения, с которой он взаимодействовал.

Я могу делать карты изображений, я могу делать CSS, я могу немного делать jQuery, но я не могу заставить это работать. Помощь приветствуется!


person Mike K.    schedule 08.08.2014    source источник
comment
Я сделал что-то подобное некоторое время назад, но не использовал карты изображений. Я использовал css спрайты. Каждая область была в другом контейнере.   -  person Philipp Werminghausen    schedule 08.08.2014
comment
Я думаю, что невозможно применить стиль к карте изображения. Я не прав?   -  person Jefferson Ribeiro    schedule 08.08.2014
comment
@JeffersonRibeiro, нет, вы не можете стилизовать карту или область карты, но вы все равно должны иметь возможность стилизовать само изображение, верно?   -  person Mike K.    schedule 08.08.2014
comment
да. Я действительно хочу это понять. Можете ли вы опубликовать пример того, что вы пробовали?   -  person Jefferson Ribeiro    schedule 08.08.2014


Ответы (1)


Я решил это (давным-давно), используя CSS: hover, чтобы показать исходное изображение в качестве фона точки доступа, сохраняя при этом позиционирование изображения.

person Mike K.    schedule 06.12.2016