hărți de imagini pe css, probleme și soluții în web-design

Noțiuni de bază

De exemplu, să ia o carte de o țară necunoscută :) Când treceți cu cursorul mouse-ului peste una dintre regiunile, ar trebui să se schimbe culoarea și să apară o scurtă descriere sub hartă.

Toate problemele vor descrie pe scurt și decide cu privire la un curs de apariție a acestora. Nerăbdător poate vedea versiunea finală a ceea ce am făcut.

Deci, pentru o nevoie de o imagine de fundal, cu unele desene pentru a descărca întreaga hartă la o dată și pentru a evita efectul de fond intermitent atunci când mouse-ul. De exemplu, o astfel (în formă redusă):

punerea în aplicare

Întreaga hartă se va baza pe mai multe CSS-principiu: poziția absolută a elementelor, schimba imaginea de fundal atunci când treceți peste și să modificați vizibilitatea afișajului.

Structura hărții imagine poate fi construit folosind o listă neordonată

sau o listă de definiții

. De exemplu, am ales fostul.

Mai întâi, creați un container pentru harta și subliniază principalele sale caracteristici:

Acum am explica. În lista de setări implicite resetată liniuțe (cu siguranță mai bine să scadă prin reset.css sau selectorul universal *. Dar eu, pentru claritate), „elimina“ apare în IE 6 peste elementele de listă hartă

și ascunde folosind display-ul: nici unul de referință. Cu toate acestea să acorde o atenție la lățimea . acesta conține mai puțin decât lățimea cardului (

), Deoarece are acum o umplutură de umplutură.

Aici, lățimea și înălțimea sunt egale cu dimensiunea de referință a imaginii de fundal pentru acest link. Deoarece

poziționare definită relativă. toate elementele de listă vor rămâne în container. Poziționați stânga și de sus sunt proiectate astfel încât versiunea de culoare a imaginii coincide cu un fundal gri.

Apoi, totul este simplu, atunci când treceți peste imaginea de fundal și se face vizibil de referință substitut prin CSS:

Acum, când treceți peste harta evidențiată oblat dorită. Rămâne doar pentru a afișa descrierea pentru fiecare link. Din nou, acest lucru ne va ajuta la poziționarea absolută și marja negativă. pentru a afișa descrierea limitelor containerului părinte (în cazul meu - o unitate cu cardul).

Scrierea CSS pentru toate :

Și apoi ne-am creat unele link-uri:

Toate setările trebuie să fie repetată pentru celelalte cinci link-uri, calculul separat pentru fiecare poziție absolută pe o hartă și locația de tapet în fundal. De fapt, nu este atât timp cât se pare, am luat doar o jumătate de oră. Vyschitavat cel mai ușor poziția pe captura de ecran în Photoshop, prin linii (Ctrl + R) și ghidajele (Ctrl + H), și apoi ajustați pentru un cuplu de pixeli de eroare „viu“.

cod de lucru

Apoi am da un exemplu de codul meu complet (XHTML):

Permiteți-mi să vă reamintesc că exemplul de lucru poate fi văzut aici. Cu toate acestea, ea poate fi descărcat în arhivă. pentru a te pentru a înțelege.

Argumente pro și contra

Ce este acolo mai mult decât este de fapt de până la tine. Voi enumera câteva dintre momentele controversate și demne, în opinia mea.

în cazul în care să se aplice

Această soluție este perfectă pentru harta realizare, pentru a face mai dinamic și utilizator frendly, cu o mulțime de sfaturi și explicații. De asemenea, pentru companiile care au sucursale în diferite țări (de ce nu lega harta lumii) sau regiuni, și doriți să economisi bani pe crearea de filme Flash.

Alternativ, puteți utiliza umorul pentru a Pics colective pentru a arăta expresii sau gânduri de indivizi, la fel ca în benzile desenate.

Exemple crea diverse hărți de imagini uimitoare cu CSS pot fi vizualizate pe cssplay.co.uk.

Blog-uri Scanner:

O altă întrebare. A făcut un meniu de exemplu, această hartă (mulțumiri pentru explicații ușor de înțeles, nu s-ar fi întâmplat fără el!). michelberger.narod.ru. Problema este că dreptul de meniu „articol“ în fayrfoks de ce ceva nu este acoperit și link-ul nu este perceput. În IE6 totul este în ordine. Nu voi ști ce motivul este, în acest fel are și că încercarea de a schimba codul. Poate cineva poate ajuta?

„Am decis,“ problema, daca se poate, care a creat codul copiat la un alt bloc de cod articolele suna. decizie Destul de prost că nu am înțeles din cauza a ceea ce funcționează.

Vechi, cod curat a rămas la pagina michelberger.narod.ru/index6.html. dacă aveți timp și dorința - uite, te rog. Foarte interesant, de ce nu funcționează, motiv pentru care există o astfel de diferență de înțelegere între IE și FF.

Toate, îmi pare rău pentru întrebarea stupidă, ea se întoarse pentru a face față problemei, deoarece este o rușine să recunosc - problema a fost excesul de suport.

Așa că vreau să-mi cer scuze și să spun vă mulțumesc din nou pentru o astfel de soluție frumoasă la cartela de meniu, asta este exact ceea ce am fost în căutarea pentru o lungă perioadă de timp și nu se aștepta să găsească. Mulțumesc mult.

Mulțumesc sa întâmplat. Foarte necesar! Foarte util, vă mulțumesc. Ai o întrebare, puteți mânca această modificare vă rugăm să ajute cum să facă ceva pentru a cresta imaginea a fost socotit nu de sus, ci de jos, pentru că am schimbat conținutul și apoi imaginea plutesc departe, atunci când modificați cantitatea de conținut de pe pagină. harta situat sub conținut.

Ideea este că acest conținut nu ar trebui să afecteze în nici un fel elementele cardului, așa cum este într-un recipient separat. Examinați aspectul.

În exemplul curent, nimic nu împiedică să încercați să numere coordonatele de mai jos:

în loc de top: XX px; scrie în jos: XX px; .