август 28, 2017

CSS Слика Мапи

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

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

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

Алтернатива на сликата само CSS мапи е објавена. Ако сте во потрага за еден полесен начин на создавање на сликата мапи учество на една слика, може да бидат заинтересирани во читање  CSS Слика Мапи, Redux

Тогаш го најдов линк до  Дејли 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 

Иако ова не може да биде најмногу “идеален” решение таму, тоа сигурно се проширува врз примерите наведени погоре. Јас апсолутно го сакаше идејата Џина, кој е зошто јас се обидел да се прошири на него. За жал, со сегашните ограничувања на 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-не.