CSS Слика Карте

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

Image Maps Испод је слика карта узорак који је изграђен у потпуности користи CSS и XHTML. Док сам додао подршку за Javascript (насловима су једноставно приказује испод слике), ја сам искључена у овом примеру – Ја сам налетела на мало проблема када је ЈС омогућен и CSS је онемогућен (детаљније у наставку ).

Алтернатива CSS мапе слике само је објављен. Ако сте у потрази за лакши начин стварања слике мапе које укључују једну слику, можда ћете бити заинтересовани за читање CSS Слика Карте, Редук

Првобитна идеја за ово долази из блогу сам прочитао тамо код Гина Траппини блогу, Сцрибблинг.нет. Њен пример је добро урађено, али сам хтео да покуша исто (или слично) користећи само CSS.

Онда сам нашао линк за Тхе Даили Криогеник сајту (преко Гина пост) која је довела до мапе слике која је направила коришћење лигхер ДХТМЛ, и направио коришћење <title> тага за приказивање белешке о хотспот. Ипак, донекле зависи Javascript / DHTML.

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

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

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

У суштини, начин на који то ради је постављањем назив ставке хотспот у дефиниција рок таг ( <dt></dt>) ваше листе, а затим у опису у дефиниција-опис таг ( <dd></dd>). CSS затим скривает дефиницију-рок (који је заиста користи када CSS је онемогућен), као и дефиницију-опис (приказане на лебдење на сидра) и приказује опис дефинитион (у овом случају, опис хотспот (а) које сте изабрали за своју имагемап), и апсолутно позиције и приказује опис након превртања хотспот (такође дефинисаном у CSS).

Код такође сетована. <img>Ознака, који приказује нон-мапира верзију мапе слике, сакривен помоћу CSS. За оне који имају CSS онемогућио је мапира верзија слике (3 комада слика) не приказује, јер је део backgroundCSS имовине. Уместо нон-мапирани верзија ће приказати, заједно са листом унстилед дефиниције. Ако имаш веб девелопер екстензију за Фирефок, само напред и онемогућити стилове. Добићете бољу идеју о дегредатион.

Узорак кода је приказан испод (погледај извор за пуну 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>

Радни пример може да се гледа испод (слика испод је преузет из Тхе Даили Криогеник ):

1 Монитор – Ево мој 17 “монитор. Волео бих да сам имао ЛЦД!

2. Телефона – Да ли ово икада престати да звони?

3. ПК Случај – Ово је моја луда ДОС кутија! Готта лове то Линук …

4. ИБМ – Ово је мој Виндовс бележница. Неки луди кодирање дешава.

5. Екстерни Флоппи Дриве Флоппи Дриве. Античка … Знам!

Док се то не може бити највише “идеално” решење тамо, сигурно шири на примерима горе наведених. Ја апсолутно волео Гина идеја, и зато сам покушала да се прошири на њега. Нажалост, са тренутним ограничењима CSS (као и одређених бровсера), нисам био у стању да у потпуности понове тачан функционалност Гина пример.

Ево примера који користи оба CSS и Javascript. Један проблем који сам налетео када CSS је онемогућен, али Javascript укључен. Нешто чудно се дешава са листе дефиниције. Ако знате како да исправи ово, јави ми. Волео бих да то раде.

Нисам успео да дође преко другог покушаја, а слике карте CSS-басед , која изгледа стварно супер. На жалост, због ограничења, односно с (посебно са само подршку :hoverефекта на <a>ознаци), није унакрсно претраживач компатибилан (још!).

Уколико имате било каквих питања, проблема и / или сугестије за побољшање, слободно ми пошаљите поруку:франкманно [-ат-] хотмаил [-дот-] нет или оставите коментар на мом блогу .

Примери су успешно тестирани у Сафари, Фирефок (Мац / Вин), ИЕ6 / Вин, и Опера 7.5 / Мац. За неке чудне разлога, Јава верзија ради у ИЕ5 / Мац, док је не-Јава верзија не.