Karaniwan, ang mga graphic na arrow sa mga website ay ginagamit upang ayusin ang pag-navigate. Kapag na-click mo ang naturang pointer, pumunta ka sa ibang pahina o sa ibang seksyon ng kasalukuyang pahina. Minsan ang ilang mga aksyon ay nakatali sa kanila - pag-highlight ng nilalaman ng patlang ng tag, paglulunsad ng isang script ng JavaScript, atbp. Upang bigyang-diin na ang arrow na ito ay isang aktibong elemento, gamitin ang "highlight" na epekto, ibig sabihin mga pagbabago sa hitsura sa mouseover.
Kailangan
Pangunahing kaalaman sa mga wikang HTML at CSS
Panuto
Hakbang 1
Tukuyin kung aling mekanismo para sa pagpapatupad ng pag-highlight ng arrow ang pinakamahusay para sa iyo. Mayroong ilan sa mga ito, dalawang simple ang ibinibigay sa mga kasunod na hakbang ng tagubiling ito. Pareho silang gumagamit ng CSS hover na pseudo-class. Kapag ang mouse cursor ay higit sa isang graphic element (arrow), ang istilong inilarawan sa pseudo-class na ito ay inilalapat dito, at ang natitirang oras na hindi aktibo ang istilong ito. Para sa parehong mga pagpipilian na inilarawan sa ibaba, maaari mong gamitin ang parehong HTML code, ngunit magkakaibang mga paglalarawan ng istilo. Ang arrow code sa mapagkukunan ng pahina ay maaaring nakasulat tulad ng sumusunod: Ang katangian ng id ay tumutukoy sa link ng pagkakakilanlan (arrowA), kung saan matutukoy ng browser kung alin sa mga paglalarawan ng istilo ang dapat mailapat dito.
Hakbang 2
Ang unang pagpipilian ay mangangailangan sa iyo upang maghanda ng dalawang mga imahe ng arrow - mayroon at walang backlit. I-save ang mga ito sa mga file na may mga pangalan tulad ng arrON.
isang # arrowA, isang # arrowA: binisita {
ipakita: harangan;
taas: 30px;
lapad: 100px;
background: url (arrOFF.gif) walang ulit;
hangganan: 0;
}
isang # arrowA: mag-hover {
background: url (arrON.gif) walang ulit;
hangganan: 0;
}
Naglalaman ang unang bloke ng mga sukat ng arrow (taas: 30px; lapad: 100px;) - palitan ang mga ito ng mga sukat ng mga nakahandang larawan ng arrow.
Hakbang 3
Pinapayagan ka ng pangalawang pagpipilian na makuha mo lamang ang isang file ng imahe. Kailangan mong ilagay ang parehong mga imahe ng arrow dito - parehong naka-highlight at hindi aktibo. Maaari mong ilagay ang mga ito sa tabi-tabi, maaari mong isa sa itaas ng isa pa. Sa sample code, ipalagay namin na ang naka-highlight na arrow ay inilalagay sa ilalim ng hindi aktibo, at ang file ay pinangalanan mong arr.gif. Ang larawang ito, tulad ng sa dating bersyon, ay ginagamit bilang isang background para sa link. Dahil ang mga sukat ng bagay ay ipinahiwatig sa paglalarawan ng estilo, ang buong natitirang background (naka-highlight na arrow) na hindi umaangkop sa kanila ay hindi makikita ng web surfer. Sa paglalarawan ng pseudo-style hover, ang isang paglilipat sa pagpoposisyon ng imahe sa background ay tinukoy, kaya't kapag na-hover mo ang cursor sa link, isang seksyon ang makikita at ngayon ang passive arrow ay lilitaw na "off-screen".
isang # arrowA, isang # arrowA: binisita {
ipakita: harangan;
lapad: 100px;
taas: 30px;
background: url (arr.gif) walang ulit;
hangganan: 0;
}
isang # arrowA: mag-hover {
background: url (arr.gif) walang ulit na 31px;
hangganan: 0;
}
Huwag kalimutan na baguhin ang laki din dito.
