CSS Obrázek Mapy

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

Přejít Příkladu

Alternativou k obrazu pouze CSS mapách bylo zveřejněno. Máte-li zájem o jednodušší způsob vytváření obrazových map zahrnující jediný snímek, který můžete mít zájem o čtení CSS Obrázek Mapy, Redux

Image MapsNíže je obrázek mapa vzorek, který je postaven výhradně pomocí CSS a XHTML. I když jsem byla přidána podpora pro JavaScript (položka tituly jsou jednoduše zobrazí pod obrázkem), jsem zakázali v tomto případě – jsem narazil na trochu problém, když je JS povoleno a CSS je zakázáno (více podrobností níže).

Prvotní myšlenka na to přišel z blogu vysílání jsem četl více než u Gina Trappini blogu, Scribbling.net. Její příklad byl dobře, ale chtěl jsem, aby se pokusili stejný (nebo podobný) pouze pomocí CSS.

Pak jsem našel odkaz na Daily Kryogenix místě (poštou Giny), který vedl k obrazové mapy, které využil ligher DHTML, a využil v tagu <title> zobrazit poznámky o hotspot. Přesto nějak závislé na JavaScriptu/DHTML.

Na konci jsem se rozhodl využít Douga Bowmana Sliding Doors techniky v kombinaci se seznamem rozlišením (<dl></dl>).

Posuvná dvířka postup umožňuje, aby obsahovala všechny obrazové efekty rolloveru do jednoho obrazového souboru a využít background-position CSS vlastnost na „posun“ obrazu v libovolném směru. Přidáním a:hover efekt na vaši CSS (v tomto případě ke značce <a> obsažené v <dd> tag), můžete posunout obraz do požadované polohy.

To, co jsem udělal, bylo vytvořit mapy obrazu ve Photoshopu. Jak můžete vidět v tomto snímku, mapa se skládá ze 3 kopií stejného obrazu, každý s různými značkami. Horní (1 z 3), potom označí aktivní body s čísly, a prostřední a dolní obrazů (2 a 3 z 3) každý obsahovat překlopení efekty (bílé transparentnosti,). Možná se divíte, proč je překlopení efekt rozděleny do dvou samostatných obrazů. Důvodem pro separaci je v důsledku překrývání přilehlých kusů (tj: monitor, notebook a diskety na stole). Spíše než mít kolizi mezi oběma položkám, převrácení účinky na okolní předměty byly odděleny na více kopií téhož obrázku.

V podstatě, jak to funguje, je tím, že se název položky hotspotu do definice období tag (<dt> </dt>) ze svého seznamu, následuje popis v definici, popis tag (<dd> </dd>). CSS poté skryje definition-term (což je skutečně použita, když CSS je zakázán), stejně jako definice-description (zobrazeno na visení kotvy) a zobrazí popis definice (v tomto případě popis hotspotu (y) jste si vybrali pro svůj obrázkovou) a absolutně pozic a zobrazuje popis upon převalí hotspotu (rovněž jak je definována v CSS).

Kód také degraduje elegantně. Od <img>, která zobrazuje non-mapoval verzi mapy obrazu je skryta za použití CSS. Pro ty, kteří mají zakázán CSS, mapované verze obrazu (3-kus obrazu) nezobrazí, protože je součástí majetku background CSS. Spíše non-mapované verze se zobrazí spolu se seznamem nestylované rozlišením. Pokud máte rozšíření Web Developer pro Firefox, klidně zakázat styly. Budete mít lepší představu o degradaci.

Vzorek kódu je zobrazeno níže (ukázat zdroj pro plné CSS a 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>

Pracovní příklad lze zobrazit níže (pod snímek byl pořízen z The Daily Kryogenix):

 

 

My Office

1. Monitor
Tady je můj 17″ monitor. Přál bych LCD!
2. Telefon
Znamená to, co někdy zastavit zvonění?
3. PC Pouzdro
To je můj šílený Linux box! Musím rád, že Linux…
4. IBM ThinkPad
Tady je můj Linux notebook. Nějaký bláznivý kódování děje.
5. Externí disketová mechanika
Disketová mechanika. Starověký… Já vím!

I když to nemusí být nejvíce „ideální“ řešení tam, určitě rozvádí příkladů uvedených výše. I naprosto miloval Gina myšlenku, což je důvod, proč jsem se pokusil rozšířit na něj. Bohužel se současným omezením CSS (stejně jako některé prohlížeče), nebyl jsem schopen plně kopírovat přesně funkčnost například Giny.

Zde je příklad, který využívá obou CSS a Javascriptu. Jeden problém jsem narazil je, když CSS je zakázán, ale povolený Javascript. Něco divného vyskytuje se seznamem definice. Pokud víte, jak to opravit, dejte mi vědět. Rád bych, aby to funguje.

Podařilo se mi narazí na další pokus o obrazové mapy CSS bázi, která vypadá opravdu skvěle. Bohužel, vzhledem k omezením IE (specificky pouze s podporou z :hover vliv na značce <a>), že to není cross-kompatibilní se všemi prohlížeči (zatím!).

Pokud máte jakékoliv dotazy, připomínky, a/nebo návrhy na zlepšení, neváhejte mi poslat poznámku: frankmanno [-at-] gmail [-dot-] com nebo zanechat komentář na mém blogu.

Tyto příklady byly úspěšně testovány v Safari, Firefox (Mac/Win), IE6/Win a Opera 7.5/Mac. Z nějakého zvláštního důvodu, verze Javascript pracuje v IE5/Mac, zatímco verze non-Javascript není.

Copyright © 2004-2017 Frank Manno.

Leave a reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>