CSS imidž mape

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

Idi na primjer

Ispod je karta uzorak slika koja je u potpunosti napravljen CSS i XHTML. Dok sam dodao podršku za Javascript (stavka naslova jednostavno prikazuju ispod slike), moram sa invaliditetom je u ovom primjeru -, upao sam u malo problem kada je JS omogućen i CSS je onemogućena (detaljnije ispod).

Početne ideje za ovo dolazi iz blogu pročitao sam kod Gina Trappini blog, Scribbling.net. Njen primjer je dobro urađeno, ali sam hteo da pokuša isto (ili slično) koristeći samo CSS.

onda sam pronašao link za The Daily Kryogenix stranice (preko Gina post) koji su doveli do karta sliku koja je iskoristio ligher DHTML, i napravio korištenje <title> tag za prikaz bilješke o hotspot. Ipak, donekle ovisi o Javascript / DHTML.

Na kraju, odlučio sam iskoristiti Doug Bowman klizna vrata tehnika u kombinaciji sa listom definicija (<dl> </ dl>).

Klizna vrata tehnika vam omogućava da sadrže sve svoju sliku efekte prevrtanja u jednom sliku, i iskoristiti CSS imovine pozadine-poziciji da “pomak” sliku u bilo kojem smjeru. Dodavanjem: hover efekt na svoj CSS (u ovom slučaju na <a> oznake koje se nalaze u <dd> tag), možete prebaciti sliku na željenu poziciju.

Ono što sam uradio je izgraditi sliku mape u Photoshopu. Kao što možete vidjeti po ovu sliku, mapa se sastoji od 3 kopija iste slike, svaki sa različitim oznakama. Na vrhu (1 od 3) jednostavno označava žarišta sa brojevima, i srednje i donje slike (2 i 3 od 3) sadrže efekte prevrtanja (bijele transparentnost). Možda se pitate zašto je efekat prevrtanja je podijeljen u dva odvojena slika. Razlog za razdvajanje je zbog preklapanja u susjednim stavke (npr: monitor, prijenosno računalo i diskete na stolu). Umesto sudar između dvije stvari, efekti zanavljanja za susjednim predmeti su razdvojeni na više kopija iste slike.

U suštini, način na koji to radi je postavljanjem naslov stavke hotspot u definiciju rok tag (<dt> </ dt>) vašeg lista, zatim opis u definiciji-opis tag (<dd> </ dd>). CSS zatim skriva definicija rok (koji se stvarno koristi kada CSS je onemogućeno), kao i definicija-opis (prikazan na hover sidra) i prikazuje opis definicija (u ovom slučaju, opis hotspot (e) ste izabrali za svoj imagemap), i apsolutno pozicije i prikazuje opis na prevrtanja hotspot (definisano u CSS).

Kod također degradira graciozno. An <img> tag, koji prikazuje ne-mapirani verziju sliku mape, sakriven pomoću CSS-a. Za one koji imaju CSS onemogućena, mapirani verziju slike (3 komada slika) ne prikazuje, jer je dio pozadinu CSS imovine. Radije ne-mapirani verzija će prikazati, zajedno sa liste unstyled definicije. Ako imate proširenje Web Developer za Firefox, samo naprijed i onemogućiti stilova. Vi ćete dobiti bolju ideju o degradaciji.

Uzorak koda je prikazan ispod (view source za punu CSS i 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>

Radna primjer možete pogledati ispod (slika ispod je preuzet iz The Daily Kryogenix):

Iako je ovo možda neće biti najviše “idealno” rješenje tamo, svakako proširuje na primjerima gore navedenih. Apsolutno volio ideju Gina, što je razlog zašto sam pokušao da se proširi na njemu. Nažalost, sa trenutnim ograničenjima CSS (kao i određene preglednicima), nisam bio u mogućnosti da u potpunosti replicirati tačan funkcionalnost primjer Gina.

Evo primjer koji koristi i CSS i Javascript. Jedan problem koji sam naletio je kada CSS je isključen, ali je JavaScript omogućen. Nešto čudno se dešava sa listom definicije. Ako znate kako da ispravite to, javite mi. Volio bih da se to radi.

Nisam uspio naići još jedan pokušaj na karti CSS-baziran slika, koji izgleda stvarno super. Nažalost, zbog ograničenja IE (posebno samo podršku: hover efekt na <a> tag), to nije cross-browser kompatibilan (još!).

Ako imate bilo kakvih pitanja, brige, i/ili sugestije za poboljšanje, slobodno da mi pošalje poruku: frankmanno [-at-] gmail [-dot-] com ili ostavite komentar na mom blogu.

Primeri su uspješno testirani u Safari, Firefox (Mac/Win), IE6/pobjeda, i Opera 7.5/Mac. Iz nekog čudnog razloga kod Javascript verzija radi u IE5/Mac, a ne Javascript verzija ne.