CSS obrázkové mapy

Original page: https://frankmanno.com/ideas/css-imagemap/

Frank Manno

Image MapsNíže je ukázková obrázková mapa, která je

Byla zveřejněna alternativa k pouze obrázkovým mapám CSS. Pokud hledáte snazší způsob vytváření obrázkových map zahrnujících jeden obrázek, možná vás bude zajímat četba CSS Image Maps, Redux

vytvořena výhradně pomocí CSS a XHTML. I když jsem přidal podporu pro Javascript (názvy položek jsou jednoduše zobrazeny pod obrázkem), v tomto příkladu jsem ji deaktivoval — narazil jsem na trochu problém, když je povoleno JS a zakázáno CSS (další podrobnosti níže).

Prvotní nápad přišel z příspěvku na blogu, který jsem si přečetl na blogu Giny Trappini, Scribbling.net. Její příklad byl dobře udělaný, ale chtěl jsem se pokusit o totéž (nebo podobné) pouze pomocí CSS.

Pak jsem našel odkaz na stránku The Daily Kryogenix (prostřednictvím příspěvku Giny), který vedl k obrázkové mapě, která používala lehčí DHTML a používala <title> značku k zobrazení poznámek o aktivním  bodu. Stále poněkud závislý na Javascriptu/DHTML.

Nakonec jsem se rozhodl využít  techniku posuvných dveří Douga Bowmana v  kombinaci s definičním seznamem (<dl></dl>).

Technika posuvných dveří vám umožňuje zahrnout všechny efekty převrácení obrázku do jednoho souboru obrázku a využít background-position vlastnost CSS k „posunutí“ obrázku v libovolném směru. Přidáním :hover efektu do vašeho CSS (v tomto případě do <a> tagu obsaženého v <dd> tagu) můžete posunout obrázek na požadovanou pozici.

Co jsem udělal, bylo vytvoření obrázkové mapy ve Photoshopu. Jak můžete vidět na tomto obrázku, mapa se skládá ze 3 kopií stejného obrázku, z nichž každá má jiné značení. Horní (1 ze 3) jednoduše označuje aktivní body čísly a prostřední a spodní obrázky (2 a 3 ze 3) obsahují efekty převrácení (bílá průhlednost). Možná se divíte, proč je efekt převrácení rozdělen do dvou samostatných obrázků. Důvodem oddělení je překrývání sousedních položek (tj.: monitor, notebook a disketa na stole). Namísto kolize mezi dvěma položkami byly efekty převrácení pro sousední položky rozděleny do více kopií stejného obrazu.

V zásadě to funguje tak, že název aktivního bodu položky umístíte do tagu definition-term (<dt></dt>) vašeho seznamu a za ním následuje popis do tagu definice-popis (<dd></dd>). CSS pak skryje definiční výraz (který se skutečně používá, když je CSS zakázáno), stejně jako popis definice (zobrazí se po najetí myší na kotvu) a zobrazí popis definice (v tomto případě popis aktivního bodu). (s), které jste vybrali pro svou obrázkovou mapu), a absolutně umístí a zobrazí popis při přejetí přes aktivní bod (také definovaný v CSS).

Kód také elegantně degraduje. <img> Tag, který zobrazuje verze, která není mapována mapy obrazu je skryta za použití CSS. Pro ty, kteří mají vypnuté CSS, se namapovaná verze obrázku (3dílný obrázek) nezobrazí, protože je součástí  background vlastnosti CSS. Spíše se zobrazí nenamapovaná verze spolu s nestylovaným seznamem definic. Pokud máte rozšíření Web Developer pro Firefox, pokračujte a deaktivujte styly. Získáte lepší představu o degradaci.

Ukázka kódu je zobrazena níže (zobrazit 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>

Funkční příklad si můžete prohlédnout níže (obrázek níže byl převzat z  The Daily Kryogenix):

I když to nemusí být „nejideálnější“ řešení, určitě rozšiřuje výše uvedené příklady. Naprosto se mi líbil Ginin nápad, a proto jsem se jej pokusil rozšířit. Bohužel se současnými omezeními CSS (stejně jako některých prohlížečů) jsem nebyl schopen plně replikovat přesnou funkčnost příkladu Giny.

Zde je příklad, který využívá CSS i Javascript. Jeden problém, na který jsem narazil, je, když je zakázáno CSS, ale je povolen Javascript. Se seznamem definic se stane něco divného. Pokud víte, jak to opravit, dejte mi vědět. Rád bych, aby to fungovalo.

Podařilo se mi narazit na další pokus o obrázkovou mapu založenou na CSS, která vypadá opravdu skvěle. Bohužel kvůli omezením IE (konkrétně pouze s podporou :hover vlivu na <a> tag) není kompatibilní s různými prohlížeči (zatím!).

Pokud máte nějaké dotazy, obavy a/nebo návrhy na zlepšení, neváhejte mi poslat poznámku: frankmanno [-at-] gmail [-tečka-] com nebo zanechte komentář na mém blogu.

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 funguje v IE5/Mac, zatímco verze bez Javascriptu ne.

Copyright © 2004-2021 Frank Manno

Leave a Reply

Your email address will not be published. Required fields are marked *