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

Az alábbiakban egy példa kép térkép, amely épített teljesen CSS és XHTML.

Bár én már támogatja a Javascript (Címek egyszerűen alatt megjelenik a kép), letiltott, hogy ebben a példában – Már fut egy kis probléma, amikor JS van kapcsolva, és CSS ki van kapcsolva (További részletek az alábbiakban).

A kezdeti ötlet ez jött egy blogkihelyezés olvastam át a Gina Trappini blog, Scribbling.net. Az ő példája is jól sikerült, de azt akartam, hogy megpróbálja ugyanazt (vagy hasonló) kizárólag CSS.

Aztán találtam egy linket a The Daily Kryogenix oldalon (via Gina post) vezetett képtérkép hogy élt ligher DHTML, és élt a <title> címkét meg a megjegyzések egy hotspot. Mégis, valamelyest függ Javascript/DHTML.

A végén úgy döntött, hogy kihasználja a Doug Bowman tolóajtók technikával kombinálva a definíciós lista ( <dl></dl>).

A tolóajtók technika lehetővé teszi, hogy tartalmazza az összes kép élőpontokkal egy képfájlt, és használja a  background-position CSS tulajdonságot „shift” a kép minden irányban. Hozzáadásával :hover hatása a CSS (ebben az esetben a <a> tag tartalmazza a <dd> címkét), akkor átkerülhet a képet a kívánt pozícióba.

Amit tett, építeni képtérképhez Photoshop. Mint látható ez a kép, a térkép alkotja 3 példányban ugyanazt a képet, mindegyik különböző jelölések. A felső (1 3) egyszerűen jelzi a hotspot számokkal, és a középső és alsó képek (2. és 3. 3) mindegyike tartalmazza az élőpontokkal (fehér szerűséget). Lehet, hogy vajon miért a borulás hatása van bontva két különböző képeket. Ennek oka az elválasztás átfedés miatt a szomszédos elemek (azaz a monitor, a notebook és a lemezen az asztalra). Ahelyett, hogy egy ütközés a két végpont között, a borulás hatása a szomszédos elemeket elválasztjuk rá több példányban ugyanazt a képet.

Lényegében az Így működik azáltal, hogy az elem címe hotspot meghatározásába távú tag (<dt></dt>) a listán, majd a leírás meghatározásának-leírás tag (<dd></dd>). A CSS majd elrejti a meghatározás távon (ami valóban használható, ha CSS ki van kapcsolva), valamint a meghatározás-leírást (jelenít meg, hover a horgony), és megjeleníti a definíciót (ebben az esetben a leírás a hotspot (k), amit választott a ImageMap), és egyáltalán pozíciók és megjeleníti a leírás alapján görgetjük a hotspot (szintén meghatározott CSS).

A kód is tetszetősen romlik. Egy <img> tag, amely megjeleníti a nem térképezett változatát a kép térkép, rejtett CSS segítségével. Azok számára, akik CSS tiltva, a leképezett változatát a kép (3 db-os kép) nem jelenik meg, mert ez része a background CSS tulajdonság. Inkább a nem térképezett verzió jelenik meg, valamint egy unstyled definíciós listát. Ha megvan a Web Developer kiterjesztés Firefox, megy előre, és stílusok letiltása. Kapsz egy jobb ötlete a lebomlás.

A mintát a kód jelenik meg (részletek forrás a teljes CSS és 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>