Original: http://www.frankmanno.com/ideas/css-imagemap/

Подолу е примерок карта на сликата, кој е целосно изграден со користење на CSS и XHTML. Додека јас сум додадена подршка за Javascript-от (точка наслови едноставно се прикажани под сликата), јас сум со Петров во овој пример – Сум работи во малку проблем кога ЈС е вклучена и CSS е оневозможено (повеќе детали подолу ).

Првичната идеја за ова дојде од еден  блог објавувате  Читам во текот на блог Gina Trappini е, Scribbling.net. Нејзиниот пример е добро направено, но јас сакав да се обиде на ист (или сличен) со користење само на CSS.

Тогаш го најдов линк до  Дејли Kryogenix  сајт (преку пост Gina е), што доведе до карта на сликата, кој направи употреба на ligher DHTML, и направи употреба на  <title> ознака за прикажување белешки за жариште. Сепак, во извесна мерка зависи Javascript-от / DHTML.

На крајот, решив да се направи употреба на Даг Бауман  лизгачки врати  техника во комбинација со листа на дефиниција ( <dl></dl>).

Лизгање техника вратите ви овозможува да ги содржи сите на сликата rollover ефекти во една датотека со слика, и да се направи употреба на  background-position CSS имотот на “промена” на сликата во било која насока. Со додавање нa:hover ефект на вашиот CSS (во овој случај на  <a> таг содржани во рамките на  <dd> таг), може да се префрлат на сликата на саканата позиција.

Она што јас го направив беше да се изгради мапа на сликата во Photoshop. Како што можете да видите со оваа  слика , на сајтот се состои од 3 копии од истата слика, секој со различни ознаки. На врвот ( 1 од 3 ) едноставно означува жариштата со броеви, и средниот и долниот слики ( 2 и 3 од 3 ) содржи ефектите од превртување (бела транспарентност). Може да се прашуваат зошто ефект превртување е поделен на два одделни слики. Причината за поделбата се должи на преклопување во соседните елементи (т.е.: монитор, лаптоп и на дискета на работната маса). Наместо да има судир меѓу две ставки, ефектите од превртување за соседните елементи се одделени со излез на повеќе копии од истата слика.

Во суштина, начинот на кој тоа работи е со поставување на насловот на жариште на точка во дефинирањето рок таг ( <dt></dt>) на вашата листа, проследено со описот во дефиниција опис таг (<dd></dd>). На CSS потоа крие дефиниција рок (што е навистина користи за кога CSS е исклучено), како и дефинирање опис (прикажана на кружење на сидро) и го прикажува опис дефиниција (во овој случај, описот на жариште (а), вие сте одбрале за вашиот imagemap), и апсолутно позиции и го прикажува опис на преврти жариште (исто така дефинирани во CSS).

Кодексот исто така го деградира благодатно. На <img> ознака, која го прикажува не-одбележан верзија на карта на сликата, се крие со користење на CSS. За оние кои имаат CSS исклучен, одбележан верзија на сликата (3-парче на сликата) за да не се прикаже, бидејќи тоа е дел од background имотот CSS. Наместо на не-одбележан верзија ќе се прикаже, заедно со листа на unstyled дефиниција. Ако имаш  веб програмери  продолжување за 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> Работната пример може да се гледа подолу од  The Daily Kryogenix