web-touristCSS – икона на мишката
Автор: SuCcEsS
Използвайки CSS може да променяте обикновената икона на мишката с някой стандартни, дори и с някой направени от вас (в IE6+).
В таблицата е показано списък с възможните икони.
Икона Стойност Примерен код Браузер
auto Всички
default style="cursor: default;" Всички
hand style="cursor: hand;" IE
pointer style="cursor: pointer;" NS6/ IE6
hand & pointer style="cursor: pointer; cursor: hand;" Cross browser
crosshair style="cursor: crosshair;" Всички
text style="cursor: text;" Всички
wait style="cursor: wait;" Всички
help style="cursor: help;" Всички
Всички
move style="cursor: move;" Всички
e-resize style="cursor: e-resize;" Всички
ne-resize style="cursor: ne-resize;" Всички
nw-resize style="cursor: nw-resize;" Всички
n-resize style="cursor: n-resize;" Всички
se-resize style="cursor: se-resize;" Всички
sw-resize style="cursor: sw-resize;" Всички
s-resize style="cursor: s-resize;" Всички
w-resize style="cursor: w-resize;" Всички
progress style="cursor: progress;" IE6
all-scroll style="cursor: all-scroll;" IE6
col-resize style="cursor: col-resize;" IE6
no-drop style="cursor: no-drop;" IE6
not-allowed style="cursor: not-allowed;" IE6
row-resize style="cursor: row-resize;" IE6
url(uri) style="cursor: url(mycursor.cur);"
Забележка: Поддържа се само .cur и .ani файлови формати, поддържа се от IE6.
IE6
vertical-text style="cursor: vertical-text;" IE6Ето няколко примера за начина по който може да се използва:
Пример #1:
<style type="text/css">
body { cursor: url(mycursor.cur); }
</style>Това ще промени стрелката на цялата страница с иконата mycursor.cur.
Пример #2:
<div style="cursor: move; width: 200px; height: 200px"></div>
<a href="help.htm" style="cursor: help;">Help</a>Във втория пример когато мишката е в/у целия DIV иконата е , а когато мишката мине в/у връзката става .
Смяна на курсора динамично с JavaScript.
Ако горните примери на помогнат, може да смените курсора с помощта на JavaScript. Просто използвайте синтаксиса :
element.style.cursor=“new_cursor_value“
Пример #3 (невъзможност за избиране на текста):
В този пример ще видите как да направите текста невъзможен за избиране. (в IE5+). Когато мишката минава над текста и се опитва да го селектира излиза иконата: .
<body onSelectStart="this.style.cursor='not-allowed'; return false;"
onMouseup="this.style.cursor='default'">
