UcallWeconn

Карты CSS малюнкі


Original on www.frankmanno.com
UcallWeconn helped with the translation of the article and provided information about the price of calling to Austria and how to call USA guide

Перайсці да прыкладу

Альтэрнатывай малюнкаў толькі для CSS карт была апублікавана. Калі вы шукаеце просты спосаб стварэння карт малюнкаў з удзелам аднаго малюнка, вы можаце быць зацікаўлены ў чытанні CSS Графічныя карты, Redux

Графічныя картыНіжэй даецца карта ўзору малюнка, убудаванага цалкам выкарыстаннем CSS і XHTML. Хоць я дадаў падтрымку Javascript (пункт назвы проста адлюстроўваецца пад малюнкам), я адключыў яго ў гэтым прыкладзе - я сапхнуўся з невялiкай праблемай, калі ўключаны JS і CSS адключана (больш падрабязная інфармацыя ніжэй).

Першапачатковая ідэя для гэтагй тэмы прыехала з блогу, якi я прачытаў у Gina Trappini, Scribbling.net. Яе прыклад быў добра зроблена, але я жадаў бы паспрабаваць зрабiць такi ж (ці аналагічны), выкарыстоўваючы толькі CSS.

Затым я знайшоў спасылку на The Daily Kryogenix сайце (праз Джына), што прывяло да малюнка карты, якія выкарыстоўваўся Ligher DHTML, і выкарыстоўваў <title> тэг для адлюстравання нататкі пра хот-споту. Тым не менш, многае залежыць ад Javascript/DHTML.

Урэшце, я вырашыў скарыстацца Doug Bowman's Sliding Doors тэхнікай ў спалучэнні з вызначэннем спісу (<dl></dl>).

Метад рассоўных дзвярэй дазваляе ўтрымоўваць увесь эфект малюнка ў адным файле і выкарыстоўваць background-position CSS уласнасці на "зрух" малюнка у любым кірунку. Дадаўшы :hover эфект вашаму CSS (у гэтым выпадку <a> тэгі, якія змяшчаюцца ў <dd> тэг), вы можаце перавесці малюнак у патрэбнае становішча.

Я зрабiў карту малюнка ў Photoshop. Як вы можаце бачыць на гэтым малюнку, карта складаецца з 3-х асобнікаў і таго ж малюнка, кожны з рознымі маркіроўкамі. Верхняя (1 з 3) проста пазначае гарачыя кропкі з нумарамі, і сярэднi і ніжнi малюнак (2 і 3 з 3) утрымоўваюць эфект белай празрыстасцьi. Вы можаце быць здзіўлены, чаму эфект перакульвання падзяляецца на два асобных малюнка. Чыннік падзелу ў сувязі з перакрыццем суседніх элементаў (гэта: манітор, наўтбук і дыскеты на стале). Замест таго, сутыкненні паміж двух пунктаў, эфект перакульвання для суседніх элементаў былі падзелены на некалькі копiй аднаго і таго ж малюнка.

Па істоце, як гэта працуе, змясціўшы назву пункта Кропка ў вызначэнні тэрміна тэгаў (<dt></dt>) са спісу, а затым апісанне тэга (<dd></dd>). CSS хавае вызначэнні тэрміна (які насамрэч выкарыстоўвалі, калі CSS адключана), а таксама апісанне (адлюстроўваецца пры навядзенні на якар) і адлюстроўвае апісанне вызначэння (у дадзеным выпадку, апісанне Кропка (S) вы абралі для вашай карты малюнка).

Код таксама зневажае. Тэг <img>, які адлюстроўвае версію малюнка карты, хаваецца з дапамогай CSS. Для тых, хто адключыу CSS, 3-часць малюнка не адлюстроўваецца, бо яна з'яўляецца часткай background CSS. Хутчэй, не адлюстраваная версія з'явіцца, без стыляў вызначэння спісу. Калі ў вас ёсць Web Developer (пашырэнне для Firefox), вы можаце адключыць стылі. Вы атрымаеце лепшае ўяўленне пра дэградацыю.

Узор кода адлюстроўваецца ніжэй (праглядзiце поўны зыходны код 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):

Office

1. Манітор Вось мой 17-цалевы манітор. Жадаў бы я ВК!
2. Тэлефон Ці азначае гэта рэч ніколі перастаюць тэлефанаваць?
3. PC Справа Гэта мой вар'ят акно Linux! Павінен кахаць, што Linux ...
4. IBM ThinkPad Вось мой нататнік Linux. Некаторыя вар'яты кадаванне адбываецца.
5. Вонкавы дыскавод гнуткіх дыскаў Floppy Drive. Старажытны ... Я ведаю!

Хоць гэта можа быць не самае "ідэальнае" рашэнне, гэта, безумоўна, пашырае прыклады, пералічаныя вышэй. Мне вельмі спадабалася ідэя Gina's, таму я паспрабаваў пашырыць яе. Нажаль, з-за абмежаваннасцi CSS (а таксама некаторых браўзараў), я быў не ў стане ў поўнай меры імітаваць дакладную функцыянальнасць у прыкладзе Gina's.

Вось прыклад, які выкарыстоўвае як CSS, так i Javascript. Адна з праблем, з якой я сапхнуўся, калі CSS адключана, але ўключаны Javascript. Штосьці дзіўнае адбываецца з вызначэннем спісу. Калі вы ведаеце, як гэта выправіць, дайце мне ведаць. Я жадаў бы, каб гэта зарабіла.

Мне атрымалася сустрэць яшчэ адну спробу на аснове CSS малюнка карты, якая выглядае сапраўды выдатна. Нажаль, з-за абмежаванняў у IE (у прыватнасці, толькі з падтрымкай :hover уплыў на <a> тэг), гэта не крос-браўзар, сумяшчальны (пакуль).

Калі ў Вас паўсталі пытанні, праблемы, і/ці прапановы па паляпшэнні, калі ласка, не саромейцеся, дасылайце мне цыдулку: frankmanno [-на-] Gmail [кропка-] com ці пакіньце каментар на маім блогу.

Прыклады былі паспяхова пратэставаны ў Safari, Firefox (Mac/Win), IE6/Win, і опера 7.5/Mac. Нейкiм чынам, версія JavaScript, працуе ў IE5/Mac, у той час як версіі без Javascript няма.



Valid CSS Valid XHTML 1.0 Transitional

---