Back to site
Since 2004, our University project has become the Internet's most widespread web hosting directory. Here we like to talk a lot about web servers, web development, networking and security services. It is, after all, our expertise. To make things better we've launched this science section with the free access to educational resources and important scientific material translated to different languages.

CSS Image Maps, Redux

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

Am primit o serie de email-uri după publicarea lua primul meu / experiment pe harti imagine CSS. Feedback-ul a fost atât de bine primite, precum şi criticat. După cum vă puteţi imagina - bazat pe "imagine sprite" metoda utilizată pentru prima să ia - o mare parte din feedback-ul centrat în jurul valorii de utilizare a acestui sprite, ca să spunem aşa. În timp ce Harta Image CSS a fost util în teorie, crearea de copii stivuite ale aceleiaşi imagini în Photoshop (sau vă instrument grafic de alegere), nu pare ca modul ideal de rezolvare a problemei.

Deci.... M-am întors la placa de desen, şi a venit cu o altă soluţie care necesită o singură imagine, unele CSS, şi puţină creativitate! Acest al doilea exemplu face uz de imagini transparente (imagini PNG) pentru a indica o adnotare pe o imagine. O mare parte din aceeaşi CSS din primul exemplu a fost folosit, cu modificări minore. Mai jos este o mostră de vechi vs nou:

Publicitate

CSS (original):


dd # monitorDef {top: 65px; stânga: 114px;} 
# dd monitorDef o {position: absolute; lăţime: 73px; inaltime: 69px; text-decoration: none;} 
# dd monitorDef-un interval {display: none;} 
# dd monitorDef a: hover {position: absolute; fundal: transparent url (office.jpg)-109px-317px nu-repeat; top:-10px; stânga:-5pixeli;} 

# dd monitorDef a: hover de control { 
 display: block; 
 de text -liniuţă: 0; 
 vertical-align: top; 
 color: # 000; 
 background-color: # F4F4F4; 
 font-greutate: bold; 
 position: absolute; 
 frontieră: 1px solid # BCBCBC; 
 partea de jos: 100%; 
 margin: 0; 
 padding: 5pixeli; 
 lăţime: 250%; 
}

CSS (revizuită):


dd # oceanDef {top: 165px; stânga: 63px;} 
# dd oceanDef-o poziţie {: absolute; lăţime: 205px; inaltime: 70px; text-decoration: none; frontieră: 1px solid # FFFCE6; 
  fundal: transparent url (NOTĂ png) se repetă;} # dd oceanDef-un interval {display: none;} # dd oceanDef a: hover {background: url transparent (hover.png) se repetă; frontieră: 1px solid # BCBCBC;} # dd oceanDef a: hover {de control display: block; text-liniuţă: 0; vertical-align: top; color: # 000; background-color: # F4F4F4; font-greutate: bold; position: absolute; frontieră: 1px solid # BCBCBC; partea de jos: 100%; margin: 0; padding: 5pixeli; lăţime: 75%; }

HTML:


	
<dl id="lalaLandMap"> 
  <dt class="title"> Manhattan Beach, California, </ dt> 
  <dt id="homes"> 1. Case frumoase </ dt> 
  aaaa> id="homesDef"> <a href="#"> <span> Cum mi-ar placea unui drept de proprietate ocean-faţă - în LA </ span> </ a> </ dd > 
  <dt id="baywatch"> 2. Baywatch </ dt>! 
  aaaa> id="baywatchDef"> <a href="#"> <span> Este Hasselhoff? </ span> </ a> </ dd> 
  <dt id="ocean"> 3. Ocean </ dt> 
  aaaa> id="oceanDef"> <a href="#"> <span> Aceasta este viata...</ span> </ a> </ dd> 
</ dl>

Un exemplu de lucru pot fi vizualizate mai jos (imaginea de mai jos a fost luată în călătoria mea de la Los Angeles (ceea ce un oras uimitor)!:

Publicitate
Manhattan Beach
Manhattan Beach, California
1. Case frumoase
Cum Mi-ar placea unui drept de proprietate ocean-fata - in LA!
2. Baywatch!
Este că Hasselhoff?
3. Ocean
Aceasta este viata...

Din nou, în timp ce acest lucru nu poate fi cel mai "ideal" soluţie de acolo, cu siguranta extinde metoda anterioară a cusăturii / stivuire mai multe copii ale aceleiaşi imagini împreună. Căderea doar l-am întâlnit cu această metodă este în uz meu de fişiere PNG pentru foliile transparente adnotare. Aşa cum poate, sau poate nu, stiu, suport IE ​​pentru imagini transparente este destul de dubioase. Am încercat folosind Cameron lui Adam IE PNG Hack Filter, dar pentru unii motiv ciudat, eu nu pot obţine IE pentru a afişa în mod corespunzător de transparenţă. Dacă doriţi să luaţi o lovitură de cuţit la el, vă rugăm să nu ezitaţi să apuca codul şi hack departe... Mi-ar plăcea să aud despre succesele tale! Aceasta este filtrul am incercat aplică în CSS:

	
Filtru: ProgID: DXImageTransform.Microsoft.AlphaImageLoader (src = 'hover.png', sizingMethod = 'scară');

Dacă aveţi orice întrebări, nelămuriri, şi / sau sugestii de îmbunătăţire, vă rugăm să nu ezitaţi să-mi trimiteţi o notă: frankmanno [-at-] gmail [dot--] com sau lăsaţi un comentariu pe blog-ul meu.

Exemplele au fost testate cu succes în Safari şi Firefox (Mac / Win). Dacă sunteţi capabil de a testa acest lucru pe alte browsere, vă rugăm să trimiteţi-mi o notă, şi voi actualiza lista.

Odată ce codul dvs. este gata pentru a fi testate, aveţi posibilitatea să îl încărcaţi dvs. de servicii de gazduire web prestatorului de a vedea ce rezultate va arata de fapt ca on-line.

Published (Last edited): 02-11-2011