Revenind la subiectul revoluțiilor. Vreau să arăt cele mai simple dintre exemplele sale. Permiteți-mi să vă reamintesc că o răsturnare într-un aspect este o imagine care se schimbă când plasați mouse-ul peste el. Pentru a lucra la acest efect, trebuie să utilizați proprietatea cunoscută a link-ului numit hover. Și dacă, de exemplu, trebuie să facem doar imaginea sub forma unei legături, dar fără text. De exemplu, logo-ul. Există un desen frumos și nu este necesar să suprapunem textul legăturii deasupra acestuia. Validatorul nu permite crearea unei legături "goale".
Pentru a rezolva această problemă, puteți aplica o proprietate de text, denumită text-indent. care este de obicei folosit pentru "linia roșie". Dar dă-i doar o valoare negativă și destul de mult. Apoi, textul se va ascunde cu mult dincolo de marginea paginii site-ului. Acest lucru este adesea realizat, mai ales când utilizați logo-urile desenului.
Dar să ne întoarcem la oile noastre, să spunem rolloverul. Principiul funcționării unei astfel de imagini în schimbare este foarte simplu: este redată o imagine dublă, una strict sub cealaltă:
După cum se poate vedea din figură, înălțimea imaginii globale ar trebui să fie uniformă și să fie suma înălțimilor ambelor imagini: 256 + 256 = 512px.
Apoi, în foaia de stil, setăm clasa pentru link-ul viitor, care va acționa în esență ca o răsturnare. Există mai multe hotspot-uri aici. În primul rând, clasa este definită nu doar printr-un nume cu un punct în față, ci atribuit direct etichetei a:
În al doilea rând, vom folosi imaginea nu direct (ca prin tag-ul img), ci numai ca fundal. Dar! Deoarece avem o singură imagine în comun, trebuie să arătăm mai întâi într-un fel nu toate, ci doar partea superioară. Pentru aceasta, atribuim următorului set de reguli clasei indicate mai sus:
fundal a.picture: url (santa.gif) no-repeat 0 0;
lățime: 256px;
înălțime: 256px;
afișare: bloc;
text-liniuță: -1000em;
>
După cum puteți vedea, ca fundal, am prescris numele imaginii însăși, fără repetiție, dar cu coordonatele 0 0. Exact aceste coordonate și spuneți browser-ului că trebuie să arătați imaginea pornind de la colțul din stânga sus. Dar până când? Dar la o lățime de până la 256 de pixeli și la același înălțime. Și nimic mai mult. În plus, pentru ca întregul lucru să funcționeze corect, este necesar să setați afișarea regulii de afișare: bloc;
Textul, așa cum am spus, trebuie să ne ascundem. Prin urmare, am adăugat următoarea regulă: text-indent: -1000em; Această valoare este mai mult decât suficientă, chiar dacă aveți un monitor cu o diagonală de 5 metri.
Dar acesta este doar jumătate din caz. Cum putem arăta a doua parte a imaginii? Pentru aceasta, adăugăm următoarele seturi foarte scurte de reguli:
a.picture: fundal hover: url (santa.gif) no-repeat 0 -256px;
>
Voila! Este la fel de simplu ca 2x2. Folosind aceeași imagine ca fundal, am schimbat coordonatele acestei imagini doar pentru proprietatea hover. Atât de largă a fost zero, așa că a rămas, dar înălțimea pe care am stabilit-o cu o valoare negativă de exact jumătate din imagine. Astfel, am ascuns partea superioară a acestuia și am arătat partea de jos. Asta e tot.
Un exemplu vie poate fi găsit aici.
Articole similare
-
Mâncare rațională - învățați 15 reguli simple de nutriție rezonabilă
-
10 sfaturi de nutriție simple și eficiente pentru pierderea în greutate
Trimiteți-le prietenilor: