Садржај
- Басиц Моусе Цурсорс
- Цустом Моусе Цурсорс
- Промена стила курсора помоћу Инлине Јавасцрипт-а
- Играње са функцијама
Промена курсора миша је једноставан начин да додате специјалне ефекте својој веб страници. Ово може побољшати употребљивост пружањем додатних визуелних помагала корисницима, посебно на сложенијим страницама као што су игре и интерактивне мапе. Јавасцрипт можете користити за промјену стила курсора према датуму, времену и било чему другом. Техника употребе Јавасцрипта, ХТМЛ-а и ЦСС-а за креирање динамичких веб страница је позната као ДХТМЛ (Динамиц ХТМЛ).
Басиц Моусе Цурсорс
Постоји неколико стандардних курсора миша који се могу користити променом стила елемента или тела странице. Имена су подразумевана, преклапање, рука, премјештање, текст, чекање и помоћ. Погледајте линк "ЦСС Цурсор Проперти" у одељку "Ресурси" за више детаља о њима. Користите ЦСС да бисте дефинисали курсор који ће бити приказан приликом преласка преко елемента на следећи начин:
Цросс-хаир
Цустом Моусе Цурсорс
Поред основних курсора, можете користити прилагођене предлошке тако што ћете адресу датотеке слике поставити као стил курсора, као у следећем примеру:
Прилагођени курсор
Не подржавају сви претраживачи ову функцију или све типове датотека. На пример, Интернет Екплорер очекује датотеке са екстензијом ".цур" или ".ани". Фирефок не прихвата анимиране курсоре (".ани") и очекује основни курсор изнад слике. За најбоље резултате, означите датотеку курсора (".цур" или ".ани"), сликовну датотеку (ПНГ, ЈПЕГ или ГИФ) и основни тип курсора као сигурносну копију. Следећи пример користи анимирани курсор као први избор, једноставан фајл на другом месту и основни курсор као последњу опцију. Прегледач ће покушати све опције док не пронађете ону коју можете користити:
Прилагођени курсор
Опен Цурсор Либрари у одељку Ресоурцес нуди колекције слободних курсора миша.
Промена стила курсора помоћу Инлине Јавасцрипт-а
ЦСС стил курсора можете променити користећи Јавасцрипт. Постоји неколико атрибута ХТМЛ-а који се односе на акције миша које се могу користити за извршавање кода кликом, померањем или лебдењем над елементом странице. Неки примери су:
онмоусеовер: Показивач миша прелази преко елемента. Онмоуседовн: Притиснут је тастер миша. онмоусеуп: Типка миша је ослобођена. онмоусеоут: Показивач миша излази из елемента. ондблцлицк: Корисник двоструко кликне мишем.
У одељку "Атрибути" секције "Атрибути" наћи ћете више атрибута које можете користити за додавање акција с Јавасцриптом.
Додајте акцију догађају (на пример, "премјештање миша") тако што ћете подесити код који желите да се покрене као вредност атрибута. У примеру испод, курсор ће се променити у "помоћ" лебдећи преко везе.
Помоћ
Играње са функцијама
Понекад ћете желети да урадите више од једног атрибута који дозвољава. Пишући све радње у Јавасцрипт функцији, можете ставити сав код на врх ХТМЛ документа и примијенити га на било који елемент тако што ћете направити позив у атрибуту догађаја. Следећи код мења курсор на елемент који је прошао као параметар "ел":
фунцтион сетЕлементЦурсор (ел) {ел.стиле.цурсор = "урл (3ДАрров.цур), цроссхаир" ГО}
Функција ће бити лоцирана у секцији скрипте заглавља документа (између ознака
и ) или у спољној кодној датотеци која је наведена у истом делу. Да бисте је користили, позовите функцију са кључном речју "тхис" из атрибута догађаја у ХТМЛ ознаци. Функција ће добити референцу на елемент повезан са догађајем миша и промениће стил курсора. На пример, ако показивач прескочи следећи текст, курсор се мења:Курсор ће се променити на овој вези
Такође можете да промените главни курсор који ће бити приказан када лебдите изнад дна странице. Следећа функција ће вам омогућити да промените курсор на тип који је наведен у параметру "цуртипе":
фунцтион сетМаинЦурсор (цуртипе) {свитцх (цуртипе) {цасе "лоад": доцумент.боди.стиле.цурсор = "урл (воркинг.ани), урл (воркинг.пнг), ваит"; бреак ГО случај "забрањен": доцумент.боди.стиле.цурсор = "урл (унаваилабле.ани), урл (унаваилабле.пнг), дефаулт"; сломити ГО случај "дефаулт": дефаулт: доцумент.боди.стиле.цурсор = "урл (арров.цур), дефаулт" ГО}}
Да бисте је користили, назовите га "учитавање", "забрањено" или "подразумевано" из атрибута догађаја у ХТМЛ ознаци. На пример, следеће дугме ће променити курсор на "учитавање" када се кликне:
Језик Јавасцрипт-а има неограничену функционалност. Доњи код ће одбројавати и свака секунда ће променити курсор миша на слику која је повезана са тренутном вредношћу. Функција "сетТимеОут" оставиће функцију суспендован на једну секунду пре него што се позове и ажурира бројач.
фунцтион доЦоунтдовнЦурсор (цоунт) {доцумент.боди.стиле.цурсор = "урл (" + цоунт + ".ани), урл (" + цоунт + ".пнг) {сетТимеоут ("доЦоунтдовнЦурсор (" + цоунт + ")", 1000) ГО} друго {доцумент.боди.стиле.цурсор = "урл (арров.цур), дефаулт" ГО}}
На веб страници користите функцију за приказ бројача миша када кликнете на гумб на обрасцу.