Sadržaj
- Osnovni pokazivači miša
- Prilagođeni pokazivači miša
- Promjena stila kursora pomoću Inline Javascripta
- Igranje s funkcijama
Promjena pokazivača miša jednostavan je način dodavanja posebnih efekata na svoju web-stranicu. To može poboljšati upotrebljivost pružanjem dodatnih vizualnih pomagala korisnicima, posebno na složenijim stranicama kao što su igre i interaktivne karte. Javascript možete koristiti za promjenu stila pokazivača prema datumu, vremenu i bilo čemu drugom. Tehnika korištenja Javascripta, HTML-a i CSS-a za izradu dinamičkih web stranica poznata je kao DHTML (Dynamic HTML).
Osnovni pokazivači miša
Postoji nekoliko standardnih pokazivača miša koji se mogu koristiti mijenjanjem stila elementa ili tijela stranice. Imena su zadana, prekrižena, ruka, premještanje, tekst, čekanje i pomoć. Više pojedinosti o njima potražite u odjeljku "CSS Cursor Property" u odjeljku "Resursi". Pomoću CSS-a definirajte pokazivač koji će se prikazati prilikom prelaska preko elementa na sljedeći način:
Cross-kosa
Prilagođeni pokazivači miša
Osim osnovnih pokazivača, možete koristiti prilagođene predloške postavljanjem adrese slikovne datoteke kao stila pokazivača, kao u sljedećem primjeru:
Prilagođeni pokazivač
Ne podržavaju svi preglednici ovu značajku ili sve vrste datoteka. Na primjer, Internet Explorer očekuje datoteke s nastavkom ".cur" ili ".ani". Firefox ne prihvaća animirane pokazivače (".ani") i očekuje osnovni pokazivač iznad slike. Za najbolje rezultate, označite datoteku pokazivača (".cur" ili ".ani"), slikovnu datoteku (PNG, JPEG ili GIF) i osnovnu vrstu pokazivača kao sigurnosnu kopiju. Sljedeći primjer koristi animirani kursor kao prvi izbor, jednostavnu datoteku na drugom mjestu i osnovni pokazivač kao posljednju opciju. Preglednik će pokušati sve opcije dok ne pronađete onu koju možete koristiti:
Prilagođeni pokazivač
Knjižnica otvorenih pokazivača u odjeljku Resources nudi zbirke slobodnih pokazivača miša.
Promjena stila kursora pomoću Inline Javascripta
Možete promijeniti CSS stil pokazivača pomoću Javascripta. Postoji nekoliko atributa HTML-a vezanih uz radnje miša koje se mogu koristiti za izvršavanje koda klikom, premještanjem ili lebdenjem nad elementom stranice. Neki primjeri su:
onmouseover: pokazivač miša prelazi preko elementa. onmousedown: Tipka miša je pritisnuta. onmouseup: Tipka miša je oslobođena. onmouseout: pokazivač miša izlazi iz elementa. ondblclick: Korisnik dvaput klikne mišem.
U odjeljku "Atributi" odjeljka "Atributi" pronaći ćete više atributa koje možete koristiti za dodavanje radnji s Javascriptom.
Dodajte radnju događaju (primjerice "premještanje mišem") tako da postavite kôd koji želite pokrenuti kao vrijednost atributa. U donjem primjeru pokazivač će se promijeniti na "pomoć" tako što će se prikazati iznad veze.
pomoći
Igranje s funkcijama
Ponekad ćete željeti učiniti više od jednog dopuštenog atributa. Pišući sve radnje u funkciji Javascripta, možete staviti sav kôd na vrh HTML dokumenta i primijeniti ga na bilo koji element upućivanjem poziva u atributu događaja. Sljedeći kôd mijenja pokazivač na element koji je prošao kao parametar "el":
funkcija setElementCursor (el) {el.style.cursor = "url (3DArrow.cur), križić" GO "
Funkcija će se nalaziti u odjeljku skripte zaglavlja dokumenta (između oznaka
i ) ili u vanjskoj datoteci koda koja je navedena u istom dijelu. Da biste je koristili, pozovite funkciju s ključnom riječi "this" iz atributa događaja u HTML oznaci. Funkcija će dobiti referencu na element povezan s događajem miša i promijenit će stil kursora. Na primjer, ako pokazivač preskoči sljedeći tekst, pokazivač se mijenja:Kursor će se promijeniti na ovoj vezi
Također možete promijeniti glavni pokazivač koji će se prikazati kada lebdite iznad dna stranice. Sljedeća funkcija će vam omogućiti da promijenite pokazivač na vrstu naznačenu u parametru "curtype":
function setMainCursor (curtype) {switch (curtype) {case "load": document.body.style.cursor = "url (working.ani), url (working.png), wait"; probiti slučaj GO "zabranjen": document.body.style.cursor = "url (unavailable.ani), url (unavailable.png), default"; slomiti GO slučaj "zadano": default: document.body.style.cursor = "url (arrow.cur), default" GO}}
Da biste ga koristili, nazovite ga "učitavanje", "zabranjeno" ili "zadano" iz atributa događaja u HTML oznaci. Na primjer, sljedeći gumb promijenit će pokazivač na "učitavanje" kada se klikne:
Jezik JavaScripta ima neograničenu funkcionalnost. Donji kôd će se odbrojavati, a svaka će sekunda promijeniti pokazivač miša na sliku povezanu s trenutnom vrijednošću. Funkcija "setTimeOut" ostavit će funkciju suspendiranu jednu sekundu prije nego što se pozove i ažurira brojač.
funkcija doCountdownCursor (count) {document.body.style.cursor = "url (" + count + ".ani), url (" + count + ".png) {setTimeout ("doCountdownCursor (" + count + ")", 1000) GO} drugo {document.body.style.cursor = "url (arrow.cur), zadano" GO}}
Na web stranici koristite funkciju za prikaz brojača miša kada kliknete gumb na obrascu.