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

Подолу е примерок карта на сликата, кој е целосно изграден со користење на CSS и XHTML.

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

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

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

Лизгање техника вратите ви овозможува да ги содржи сите на сликата роловер ефекти во една датотека со слика, и да се направи употреба на background-positionCSS имотот на “промена” на сликата во било која насока. Со додавање на: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, оди напред и да се оневозможи стилови. Ќе добиете подобра идеја на lеградација.

Еден примерок од кодот е прикажана под (извор поглед за целосно 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 (како и некои прелистувачи), не беше во можност целосно да се реплицираат во точната функционалност на пример Gina е.

Еве еден пример што го прави користењето на двете CSS и JavaScript. Еден проблем налетав е кога CSS е оневозможено, но Javascript-от е овозможено. Нешто чудно се случува со дефиницијата листа. Ако знаете како да се поправи ова, дозволете ми да знам. Јас би сакал да го добие работа.

Јас не успеваат да се среќаваме со уште еден обид на CSS-базирани карта на сликата, која изгледа навистина одлично. За жал, се должи на ограничувањата ИЕ (конкретно само со поддршка на :hoverвлијание врз <a>таг), тоа не е крос-пребарувачот компатибилен (сепак!).

Ако имате било какви прашања, проблеми и/или предлози за подобрување, ве молиме да бидат слободни да ми испратите белешка: frankmanno [-at-] gmail [-dot-] com или оставете коментар на мојот блог.

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

Copyright © 2004-2017 Frank Manno.