Франк Манно

Фронтенд уеб разработчик

Оригиналът:
CSS Image Maps

Напред към Пример

Една алтернатива на CSS карти само с изображения е бил публикуван. Ако търсите по-лесен начин за създаване на изображения-карти, включващи едно изображение, може да се интересуват от четене CSS Изображение Карти, Редукс

Изображение MapsПо-долу е извадка карта изображение, която е изградена изцяло с помощта на CSS и XHTML. Докато съм добавя поддръжка за Javascript (статия заглавия се просто даден под картинката), аз съм с увреждания него в този пример – аз тичам в малък проблем, когато JS е активиран и CSS е забранен (повече информация по-долу).

Първоначалната идея за това дойде от един блог постинг Прочетох в блога на Джина Траппини е, Scribbling.net. Нейният пример е добре направено, но аз исках да се опита същото (или подобен), използвайки само CSS.

След това намерих линк към The Daily Kryogenix сайта (чрез пощата на Джина), които доведоха до картата образ, който се възползва от ligher DHTML и възползвала от <title> таг, за да изведете бележки за гореща точка. И все пак, донякъде зависи от Javascript / DHTML.

В края на краищата, аз реших да се възползват от Дъг Бауман плъзгащи врати техника съчетана със списъка определение ( <dl></dl> ).

Плъзгащи врати Техниката позволява да съдържа всички ваши изображения преобръщане ефекти в един графичен файл, и да се възползва от background-position CSS свойството да „смени“ изображението във всяка посока. Чрез добавяне на :hover ефект към вашия CSS (в този случай към <a> маркер съдържа в<dd> таг), можете да преместите изображението до желаната позиция.

Това, което направих беше изгради карта на изображението в Photoshop. Както можете да видите от този имидж , картата е съставена от три копия от едно и също изображение, всяка с различни маркировки. В горната част (1 от 3) просто марка горещите точки с номера и средните и долните изображения (2 и 3 от 3) всяка съдържа ефектите на преобръщане (бяло прозрачно). Може би се чудите защо ефектът преобръщане се разделя на две отделни изображения. Причината за раздялата е поради припокриването в съседни позиции (т.е.: монитора, бележника и дискетата на бюрото). Вместо сблъсък между двете позиции, ефектите преобръщане за съседните елементи се разделят на няколко копия на едно и също изображение.

По същество, начина, по който това работи е чрез поставяне на заглавието на чувствителната точка в определянето план таг ( <dt></dt> ) на вашия списък, следвана от описанието в дефиниция-описание маркер ( <dd></dd> ). The CSS тогава скрива определение план (което е много използван за когато CSS е забранена), както и определение-описанието (извежда при зависване на котвата) и показва описанието на всяка дефиниция (в този случай, описанието на чувствителната (и), който сте избрали за вашия обекта от), и абсолютно позиции и показва описанието на търкаля върху чувствителната област (също са определени в СГО).

Кодът също разгражда грациозно. <img> таг, който показва не-картирани версия на картата на изображението, е скрит с помощта на CSS. За тези, които имат CSS забранена, картирани версия на изображението (3-парче изображение) на не показва, тъй като тя е част от background имота CSS. По-скоро не-картирани версия ще се появи, заедно със списъка на безстил определение. Ако имаш Web Developer разширение за Firefox, давай напред и деактивирайте стилове. Вие ще получите по-добра представа за degredation.

Проба от кода се показва по-долу (източник изглед за пълно 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>

Въпреки, че това може да не е най-„идеална“ решение там, то със сигурност се разширява при примерите, изброени по-горе. Аз абсолютно обичаше идея на Джина, поради което се опитва да разшири върху него. За съжаление, с настоящите ограничения на CSS (както и някои браузъри), аз не бях в състояние да възпроизведе напълно точната функционалността на пример на Джина.

Ето един пример , който прави използването на двете CSS и Javascript. Един проблем, аз се блъсна в е, когато CSS е неактивна, но Javascript е активиран. Нещо странно се случва с списъка с дефиниции. Ако знаете как да се коригира това, да ме уведомите. Бих се радвал да го работи.

Успях да се намира още един опит на CSS-базирани карта изображение , което изглежда наистина страхотно. За съжаление, поради ограничения на IE (конкретно само с подкрепата на :hover ефект върху <a> таг), това не е кръстосано браузър съвместими (все още!).

Ако имате някакви въпроси, се отнася, и / или предложения за подобрения, моля не се колебайте да ми изпратите бележка: frankmanno [-at-] Gmail [-dot-] COM или да напишете коментар на моя блог .

Примерите са били успешно тествани в Safari, Firefox (Mac / Win), IE6 / Win, и Opera 7.5 / Mac. За някаква странна причина, Javascript версия работи в IE5 / Mac, докато не-Javascript версия не.

Създадена е работна например може да бъде разгледана по-долу (на снимката по-долу е взет от The Daily Kryogenix ):