Original:http://www.frankmanno.com/ideas/css-imagemap/
Ниже приведен пример карты изображений, которая полностью построена с использованием CSS и XHTML. Хотя я добавил поддержку Javascript (названия элементов просто отображаются под изображением), я отключил его в этом примере – я столкнулся с проблемой, когда JS включен и CSS отключен (более подробно ниже).
Первоначальная идея для этого пришла из блога, который я прочитал в блоге Джины Траппини Scribbling.net. Ее пример был хорошо проделан, но я хотел попробовать то же (или подобное), используя только CSS.
Затем я нашел ссылку на сайт The Daily Kryogenix (через сообщение Джины), что привело к созданию карты изображений, в которой использовался более длинный DHTML, и использовал тег <title> для отображения заметок о горячей точке. Тем не менее, в некоторой степени зависит от Javascript / DHTML.
В конце концов, я решил использовать технику Скользящих Двери Дуга Боумена в сочетании со списком определений (<dl> </ dl>).
Техника раздвижных дверей позволяет вам включать все эффекты переворачивания изображения в один файл изображения и использовать свойство CSS background-position для «смещения» изображения в любом направлении. Добавив эффект зависания к вашему CSS (в этом случае к тегу <a>, содержащемуся в теге <dd>), вы можете переместить изображение в нужную позицию.
То, что я сделал, – это создание карты изображений в Photoshop. Как вы можете видеть по этому изображению, карта состоит из 3 копий одного и того же изображения, каждый с разной маркировкой. Верхняя часть (1 из 3) просто отмечает горячие точки с цифрами, а среднее и нижнее изображения (2 и 3 из 3) содержат эффекты прокрутки (белая прозрачность). Вы можете удивиться, почему эффект опрокидывания разделен на два отдельных изображения. Причина разделения связана с перекрытием соседних элементов (например, монитора, ноутбука и гибкого диска на столе). Вместо того, чтобы столкновения между двумя элементами, эффекты опрокидывания для соседних элементов были разделены на несколько копий одного и того же изображения.
По сути, это работает, помещая заголовок пункта hotspot элемента в тег определения термина (<dt> </ dt>) вашего списка, за которым следует описание в теге определения-описания (<dd> </ Dd>). CSS затем скрывает термин-определение (который действительно используется, когда отключен CSS), а также описание определения (отображается при наведении на якорь) и отображает описание определения (в этом случае описание точки доступа (Ы), которые вы выбрали для своей карты образов), и абсолютно позиционирует и отображает описание при переходе через горячую точку (также определенную в CSS).
Код также деградирует грациозно. Тег <img>, который отображает немаркированную версию карты изображения, скрывается с помощью CSS. Для тех, у кого отключена CSS, отображаемая версия изображения (изображение из трех частей) не отображается, так как это часть фона CSS-свойства. Вместо него отобразится версия без сопоставления, а также список неопределенных определений. Если у вас есть расширение Web Developer для Firefox, продолжайте работу и отключите стили. Вы получите более полное представление об этом.
Ниже показан пример кода (источник просмотра для полного CSS и XHTML):
CSS:
dd#monitorDef{ top: 65px; left: 114px; }
dd#monitorDef a{ position: absolute; width: 73px; height: 69px; text-decoration: none; }
dd#monitorDef a span{ display: none; }
dd#monitorDef a:hover{ position: absolute; background: transparent url(office.jpg) -109px -317px no-repeat; top: -10px; left: -5px; }
dd#monitorDef a:hover span{
display: block;
text-indent: 0;
vertical-align: top;
color: #000;
background-color: #F4F4F4;
font-weight: bold;
position: absolute;
border: 1px solid #BCBCBC;
bottom: 100%;
margin: 0;
padding: 5px;
width: 250%;
}
HTML:
<dl id="officeMap">
<dt id="monitor">1. Monitor</dt>
<dd id="monitorDef"><a href="#"><span>Here's my 17" Monitor. I wish I had an LCD!</span></a></dd>
<dt id="phone">2. Phone</dt>
<dd id="phoneDef"><a href="#"><span>Does this thing ever stop ringing?</span></a></dd>
<dt id="case">3. PC Case</dt>
<dd id="caseDef"><a href="#"><span>This is my crazy Linux box! Gotta love that Linux...</span></a></dd>
<dt id="notebook">4. IBM ThinkPad</dt>
<dd id="notebookDef"><a href="#"><span>Here's my Linux notebook. Some crazy coding going on.</span></a></dd>
<dt id="floppy">5. External Floppy Drive</dt>
<dd id="floppyDef"><a href="#"><span>Floppy Drive. Ancient... I know!</span></a></dd>
</dl>