Ați observat vreodată cum, uneori, când treceți cu mouse-ul peste o imagine, aceasta devine neagră pentru o secundă, apoi încarcă imaginea de rollover? Când treceți înapoi cu mouse-ul, totul este fără întreruperi.
Iată un exemplu a ceea ce vreau să spun, folosind imaginea mea cu scara subterană (împărțită în două bucăți).
Acest lucru se datorează faptului că există două imagini separate care trebuie încărcate, iar a doua (la rollover) necesită timp suplimentar pentru a se încărca atunci când efectul de rollover este declanșat.
În acest articol, vă voi arăta cum să eliminați acea întârziere folosind o tehnică CSS care încarcă întreaga imagine dintr-o dată și afișează o porțiune din ea.
Combinați imaginea
Primul pas pentru a face acest lucru să funcționeze este combinarea ambelor jumătăți ale imaginii într-una singură. Puteți folosi editorul de imagini la alegere pentru a face acest lucru, pur și simplu copiați ambele imagini, dublați înălțimea și lipiți-o pe cea inactivă deasupra celei active.
Imaginea din mijloc ar trebui să fie ceea ce urmăriți. Acum trecem la CSS.
Codul
Primul pas în CSS este limitarea înălțimii imaginii la jumătate (practic, astfel încât să apară doar scara de sus).
În scopurile acestui tutorial, vom folosi o clasă numită .rollover-tut. Deoarece imaginea originală a scării are 153×149, vom folosi acest cod CSS:
.rollover-tut {
height: 149px;
width: 153px;
display: block;
}Deoarece facem un link, vom folosi următorul cod HTML:
<a class="rollover-tut" href="#"></a>În acest moment, linkul dvs. ar trebui să arate ca imaginea originală a scării, fără efect de rollover (încă).
Pentru a face efectul de rollover să funcționeze, vom folosi o proprietate CSS numită background-position pe pseudoclasa :hover.
.rollover-tut:hover {
background-position: 0 -149px;
}
Cu codul CSS de mai sus, practic mutați imaginea de fundal în sus cu 149 pixeli (amintiți-vă, înălțimea unei imagini de scară, sau jumătate din ambele combinate).
O modalitate mai ușoară de a vă aminti este să folosiți în schimb următorul cod de rollover, care va avea același efect ca cel de mai sus și nu trebuie să vă amintiți niciun număr (mulțumire: Art Webb prin comentarii):
.rollover-tut:hover {
background-position: bottom left;
}Și iată ce obțineți:
Observați că nu mai există nicio întârziere între efectele de rollover, deoarece întreaga imagine este încărcată dintr-o dată.
Concluzie
Aceeași tehnică poate fi folosită pentru aproape orice efect de rollover de imagine de fundal. Nu sunt sigur dacă vreunul dintre voi a verificat recent designul blogului meu personal, dar îl folosesc extensiv pe aproape fiecare link care folosește o imagine de fundal (și butonul de trimitere de pe formularul meu de comentarii).
Sper că v-a plăcut acest sfat CSS. Dacă aveți idei pentru viitoare articole cu sfaturi CSS, anunțați-mă în comentarii.
WOW! Tutorial drăguț! Îmi place!
Vă voi sugera să examinați navigarea de pe site-ul oficial Apple. Este o utilizare impresionantă a sprite-urilor CSS. O altă utilizare foarte eficientă a sprite-urilor CSS poate fi văzută aici.
http://www.problogdesign.com/wp-content/themes/pro-blog-design3/images/pbd-png-sprite.png
Vezi această imagine și apoi vezi cum Martin a spart-o în diferite locuri pe blogul său.:}
Există cu siguranță modalități mai avansate de a utiliza această tehnică. Cea pe care am făcut-o a fost probabil cea mai simplă dintre toate.
Am observat, de asemenea, ceva similar pe CSS Tricks, ceea ce am găsit interesant.
http://cdn.css-tricks.com/wp-content/themes/CSS-Tricks-6/images/css-tricks.png
Hei Leland,
Acesta este un post foarte, foarte bun pentru începătorii care încă folosesc 2 imagini diferite pentru a crea efecte de rollover – foarte bine scris, scurt și la obiect! Și butoane frumoase!
Am început recent să folosesc sprite-uri în proiectele clienților mei (mi s-a părut destul de anevoios data trecută lol).
Am o imagine uriașă care are toate icoanele, butoanele de care aveam nevoie pentru site. Apoi am folosit background-position pentru a afișa fiecare element. Poate deveni cu adevărat anevoios dacă sunt prea multe elemente, dar merită cu adevărat
Apropo, este prima dată când vizitez site-ul tău. Îmi place enorm, o mulțime de detalii frumoase & subtile
Mulțumesc Iwana, mă bucur că ți-a plăcut tutorialul. Apreciez și cuvintele frumoase despre site-ul meu. 😀
Această tehnică se numește CSS Sprites.
Ai putea adăuga încă o stare… Exemplu: normal, hover, selectat… Și apoi pentru aceste trei stări schimbi doar poziția fundalului în stânga sus, centru stânga și stânga jos. Notă: Această metodă necesită puțin cod php :)
Mulțumesc pentru clarificare, Milos. Poate voi face un post ulterior despre cum să faci unul cu o stare selectată/activă, folosind în continuare o singură imagine.
Te referi la cod CSS (și nu PHP), corect?
Mă refer la CSS și puțin PHP. În acest caz, avem nevoie de acel php pentru a declara când linkul este în starea selectată. Iată un exemplu pe scurt pentru un site cu două pagini (Page1 și Page2):
Codul pentru Page1:
<?php $thisPage="Welcome to Page1!"; ?><br> <head><br> <title><?php if ($thisPage!="") echo "$thisPage ::"; ?> mysite.com</title><br> ...</head><br> <body><br> <ul id="menu"><br> <li><a class="page1" <?php if ($thisPage=="Welcome to Page1!") echo "id=\"selected\"" ; ?> href="page1.php">Page1</a></li><br> <li><a class="page2" <?php if ($thisPage=="Welcome to Page2!") echo "id=\"selected\"" ; ?> href="page2.php">Page2</a></li><br> </ul><br> ...content...
</body>
Pentru pagina 2, doar setează variabila $thisPage la „Welcome to Page2!”
CSS pentru linkuri:
#menu a {background-position: left top;
}
#menu a:hover {
background-position: left center;
}
#menu a#selected, #menu a#selected:hover{
background-position: left bottom;
}
Asta e tot :) Noroc
Super, știu că în WordPress uneori generează clase implicite pentru elementele de pagină active dacă folosești funcțiile lor.
Cum ar fi .current-page-item (pentru pagini active) sau .current-cat pentru arhive de categorii active.
Mulțumesc pentru sfaturi.
Cu plăcere 😉 Noroc
Îmi place să folosesc o singură imagine pentru stările normală și hover. Singura modificare pe care aș face-o este pentru poziția fundalului stării hover. Schimb-o în:
.rollover-tut:hover { background-position: bottom left; }
În acest fel, dacă schimbi dimensiunea imaginii, nu trebuie să ajustezi dimensiunea.
Ah… wow, nu m-am gândit niciodată la asta, dar are perfect sens. Mulțumesc pentru sfat.
Dar dacă ai schimba dimensiunea imaginii, nu ar trebui să schimbi înălțimea și lățimea în prima declarație?
Încă ajută, fiindcă este doar un lucru în minus de schimbat.
Frumos și simplu. Poate asta va opri oamenii să folosească 2 imagini pentru rollovers.. ei bine, la imagini unice =). Tutorial bun, omule, va fi util pentru unii oameni în viitor =)
Mă bucur că ți-a plăcut tutorialul, Anto.