Jellemzően a weboldalak grafikus nyilait használják a navigáció megszervezésére. Ha rákattint egy ilyen mutatóra, akkor egy másik oldalra vagy az aktuális oldal másik szakaszára lép. Előfordul, hogy egyes műveletek hozzájuk vannak kötve - kiemelve a címke mező tartalmát, elindítva egy JavaScript szkriptet stb. Annak hangsúlyozásához, hogy ez a nyíl aktív elem, használja a "kiemelés" effektust, azaz megjelenésbeli változások az egérrel.
Szükséges
HTML és CSS nyelvek alapismerete
Utasítás
1. lépés
Határozza meg, hogy a nyíl kiemelés végrehajtásának melyik mechanizmusa a legjobb az Ön számára. Több közülük van, két egyszerűt adunk meg az utasítás további lépéseiben. Mindketten a CSS lebegő álosztályt használják. Ha az egér kurzor egy grafikus elem (nyíl) fölött van, akkor az ebben az ál-osztályban leírt stílust alkalmazzák rá, és a többi idő alatt ez a stílus nem aktív. Az alábbiakban leírt mindkét lehetőségnél ugyanazt a HTML-t használhatja kódot, de különböző stílusleírásokat. Az oldalforrásban található nyílkód a következőképpen írható: Az id attribútum megadja a hivatkozásazonosítót (nyílA), amellyel a böngésző meghatározza, hogy melyik stílusleírást kell alkalmazni rá.
2. lépés
Az első lehetőség két nyílkép elkészítését igényli - háttérvilágítással és anélkül. Mentse őket olyan fájlokba, mint például az arrON.
a # arrowA, a # arrowA: meglátogatott {
kijelző: blokk;
magasság: 30px;
szélesség: 100px;
háttér: url (arrOFF.gif) no-repeat;
határ: 0;
}
a # arrowA: lebeg {
háttér: url (arrON.gif) no-repeat;
határ: 0;
}
Az első blokk a nyíl méreteit tartalmazza (magasság: 30px; szélesség: 100px;) - cserélje le az előkészített nyílképek méreteire.
3. lépés
A második lehetőség lehetővé teszi, hogy csak egy képfájllal boldoguljon. Be kell helyeznie a nyíl mindkét képét - mind kiemelt, mind inaktív képet. Egymás mellé helyezheti őket, egymás fölé helyezheti. A mintakódban feltételezzük, hogy a kiemelt nyíl az inaktív alá kerül, és a fájlt Ön az arr.
a # arrowA, a # arrowA: meglátogatott {
kijelző: blokk;
szélesség: 100px;
magasság: 30px;
háttér: url (arr.gif) no-repeat;
határ: 0;
}
a # arrowA: lebeg {
háttér: url (arr.gif) no-ismétlés 31px;
határ: 0;
}
Ne felejtsen el itt is átméretezni.
