Помогите, пожалуйста, сменить курсор на страничке...
Страница на народе, уж так вышло, причем шаблонная, как думаете, возможно изменить его?
Если можно, то как прописать все это?
1. Lula - 22 Сентября, 2004 - 08:42:23 - перейти к сообщению
2. TvoyWeb - 22 Сентября, 2004 - 10:40:18 - перейти к сообщению
Lula
Делается это при помощи CSS. Ниже приведены все известные параметры-смены курсора.
Поместите курсор в любую рамку и увидите какой он примет вид.
<div style="border: 1px solid #A0522D;padding: 4px; width: 75%;cursor:hand;"> style="cursor:hand;"</div><br />
<div style="border: 1px solid #A0522D;padding: 4px; width: 75%;cursor: all-scroll;"> style="cursor:all-scroll;" - Не работает в Opera</div><br />
<div style="border: 1px solid #A0522D;padding: 4px; width: 75%;cursor:col-resize;"> style="cursor:col-resize;" - Не работает в Opera</div><br />
<div style="border: 1px solid #A0522D;padding: 4px; width: 75%;cursor:crosshair;"> style="cursor:crosshair;"</div><br />
<div style="border: 1px solid #A0522D;padding: 4px; width: 75%;cursor:help;"> style="cursor:help;"</div><br />
<div style="border: 1px solid #A0522D;padding: 4px; width: 75%;cursor:move;"> style="cursor:move;"</div><br />
<div style="border: 1px solid #A0522D;padding: 4px; width: 75%;cursor:no-drop;"> style="cursor:no-drop;" - Не работает в Opera</div><br />
<div style="border: 1px solid #A0522D;padding: 4px; width: 75%;cursor:not-allowed;"> style="cursor:not-allowed;" - Не работает в Opera</div><br />
<div style="border: 1px solid #A0522D;padding: 4px; width: 75%;cursor: pointer;"> style="cursor: pointer;"</div><br />
<div style="border: 1px solid #A0522D;padding: 4px; width: 75%;cursor:progress;"> style="cursor:progress;"</div><br />
<div style="border: 1px solid #A0522D;padding: 4px; width: 75%;cursor:row-resize;"> style="cursor:row-resize;" - Не работает в Opera</div><br />
<div style="border: 1px solid #A0522D;padding: 4px; width: 75%;cursor:text;"> style="cursor:text;"</div><br />
<div style="border: 1px solid #A0522D;padding: 4px; width: 75%;cursor:vertical-text;"> style="cursor:vertical-text;" - Не работает в Opera</div><br />
<div style="border: 1px solid #A0522D;padding: 4px; width: 75%;cursor:wait;"> style="cursor:wait;"</div><br />
<div style="border: 1px solid #A0522D;padding: 4px; width: 75%;cursor:e-resize;"> style="cursor:e-resize;"</div><br />
<div style="border: 1px solid #A0522D;padding: 4px; width: 75%;cursor:ne-resize;"> style="cursor:ne-resize;"</div><br />
<div style="border: 1px solid #A0522D;padding: 4px; width: 75%;cursor:nw-resize;"> style="cursor:nw-resize;"</div><br />
<div style="border: 1px solid #A0522D;padding: 4px; width: 75%;cursor:n-resize;"> style="cursor:n-resize;"</div><br />
<div style="border: 1px solid #A0522D;padding: 4px; width: 75%;cursor:se-resize;"> style="cursor:se-resize;"</div><br />
<div style="border: 1px solid #A0522D;padding: 4px; width: 75%;cursor:sw-resize;"> style="cursor:sw-resize;"</div><br />
<div style="border: 1px solid #A0522D;padding: 4px; width: 75%;cursor:s-resize;"> style="cursor:s-resize;"</div><br />
<div style="border: 1px solid #A0522D;padding: 4px; width: 75%;cursor:w-resize;"> style="cursor:w-resize;"</div><br />
<div style="border: 1px solid #A0522D;padding: 4px; width: 75%;cursor:url(http://tvoyweb.ru/forums/screenshots/homm_busy.ani);"> style="cursor: url(dance.gif);"</div>
Что то последний вариант никак работать не хочет! Как разберусь напишу.
Делается это при помощи CSS. Ниже приведены все известные параметры-смены курсора.
Поместите курсор в любую рамку и увидите какой он примет вид.
<div style="border: 1px solid #A0522D;padding: 4px; width: 75%;cursor:hand;"> style="cursor:hand;"</div><br />
<div style="border: 1px solid #A0522D;padding: 4px; width: 75%;cursor: all-scroll;"> style="cursor:all-scroll;" - Не работает в Opera</div><br />
<div style="border: 1px solid #A0522D;padding: 4px; width: 75%;cursor:col-resize;"> style="cursor:col-resize;" - Не работает в Opera</div><br />
<div style="border: 1px solid #A0522D;padding: 4px; width: 75%;cursor:crosshair;"> style="cursor:crosshair;"</div><br />
<div style="border: 1px solid #A0522D;padding: 4px; width: 75%;cursor:help;"> style="cursor:help;"</div><br />
<div style="border: 1px solid #A0522D;padding: 4px; width: 75%;cursor:move;"> style="cursor:move;"</div><br />
<div style="border: 1px solid #A0522D;padding: 4px; width: 75%;cursor:no-drop;"> style="cursor:no-drop;" - Не работает в Opera</div><br />
<div style="border: 1px solid #A0522D;padding: 4px; width: 75%;cursor:not-allowed;"> style="cursor:not-allowed;" - Не работает в Opera</div><br />
<div style="border: 1px solid #A0522D;padding: 4px; width: 75%;cursor: pointer;"> style="cursor: pointer;"</div><br />
<div style="border: 1px solid #A0522D;padding: 4px; width: 75%;cursor:progress;"> style="cursor:progress;"</div><br />
<div style="border: 1px solid #A0522D;padding: 4px; width: 75%;cursor:row-resize;"> style="cursor:row-resize;" - Не работает в Opera</div><br />
<div style="border: 1px solid #A0522D;padding: 4px; width: 75%;cursor:text;"> style="cursor:text;"</div><br />
<div style="border: 1px solid #A0522D;padding: 4px; width: 75%;cursor:vertical-text;"> style="cursor:vertical-text;" - Не работает в Opera</div><br />
<div style="border: 1px solid #A0522D;padding: 4px; width: 75%;cursor:wait;"> style="cursor:wait;"</div><br />
<div style="border: 1px solid #A0522D;padding: 4px; width: 75%;cursor:e-resize;"> style="cursor:e-resize;"</div><br />
<div style="border: 1px solid #A0522D;padding: 4px; width: 75%;cursor:ne-resize;"> style="cursor:ne-resize;"</div><br />
<div style="border: 1px solid #A0522D;padding: 4px; width: 75%;cursor:nw-resize;"> style="cursor:nw-resize;"</div><br />
<div style="border: 1px solid #A0522D;padding: 4px; width: 75%;cursor:n-resize;"> style="cursor:n-resize;"</div><br />
<div style="border: 1px solid #A0522D;padding: 4px; width: 75%;cursor:se-resize;"> style="cursor:se-resize;"</div><br />
<div style="border: 1px solid #A0522D;padding: 4px; width: 75%;cursor:sw-resize;"> style="cursor:sw-resize;"</div><br />
<div style="border: 1px solid #A0522D;padding: 4px; width: 75%;cursor:s-resize;"> style="cursor:s-resize;"</div><br />
<div style="border: 1px solid #A0522D;padding: 4px; width: 75%;cursor:w-resize;"> style="cursor:w-resize;"</div><br />
<div style="border: 1px solid #A0522D;padding: 4px; width: 75%;cursor:url(http://tvoyweb.ru/forums/screenshots/homm_busy.ani);"> style="cursor: url(dance.gif);"</div>
Что то последний вариант никак работать не хочет! Как разберусь напишу.
3. Lula - 23 Сентября, 2004 - 05:53:05 - перейти к сообщению
Я как раз и хочу сменить стандартную форму курсора на рисунок (бабочки, черепашки и прочее)
Рисунок есть, а как это прописать - не знаю...Вот только на Вас надежда, когда разберетесь.
Рисунок есть, а как это прописать - не знаю...Вот только на Вас надежда, когда разберетесь.
4. TvoyWeb - 23 Сентября, 2004 - 08:39:15 - перейти к сообщению
Lula
Ну вообщем ошибка была в используемом формате файла.
Использовать ИМХО нужно только файлы курсоров с расширением .ani или .cur .
Смотрите пример ниже:
<div style="border: 1px solid #A0522D;padding: 4px; width: 75%;cursor:url(http://tvoyweb.ru/forums/screenshots/homm_busy.ani);"> style="cursor:url(http://tvoyweb.ru/forums/screenshots/homm_busy.ani);" - В IE работает, в Opera нет. В других браузерах не проверял. Наведите курсор на этот текст и подождите пока загрузится новый курсор. Используемый мною в этом примере курсор весит около 6kb</div>
Ну вообщем ошибка была в используемом формате файла.
Использовать ИМХО нужно только файлы курсоров с расширением .ani или .cur .
Смотрите пример ниже:
<div style="border: 1px solid #A0522D;padding: 4px; width: 75%;cursor:url(http://tvoyweb.ru/forums/screenshots/homm_busy.ani);"> style="cursor:url(http://tvoyweb.ru/forums/screenshots/homm_busy.ani);" - В IE работает, в Opera нет. В других браузерах не проверял. Наведите курсор на этот текст и подождите пока загрузится новый курсор. Используемый мною в этом примере курсор весит около 6kb</div>
5. Lula - 23 Сентября, 2004 - 08:45:31 - перейти к сообщению
Спасибо!!!
А теперь уточняющий и дополняющий вопрос - не подскажете какую-нибудь библиотеку анимированных курсоров? Например, где вы нашли этот?
А теперь уточняющий и дополняющий вопрос - не подскажете какую-нибудь библиотеку анимированных курсоров? Например, где вы нашли этот?
6. TvoyWeb - 23 Сентября, 2004 - 14:21:19 - перейти к сообщению
Lula
Например здесь .
Например здесь .
7. SviMik - 17 Октября, 2004 - 15:55:41 - перейти к сообщению
Подскажите, плз, можно ли на моей страничке заменить все курсоры своими? Вставил
CURSOR: url('mauscursor/arrow.cur';
указатель изменился, а при наведении курсора например на ссылку курсор, естественно, меняется на стандартнй курсор-руку. А я хочу, чтобы при наведении на ссылку курсор менялся на другой, тоже мой, для текста - у меня тоже свой курсор есть... вообщем у меня 12 курсоров на все случаи жизни (обычный, рука, изменения размера окна, песочные часы, для текста и др.) А как в CSS это вставить?
CURSOR: url('mauscursor/arrow.cur';
указатель изменился, а при наведении курсора например на ссылку курсор, естественно, меняется на стандартнй курсор-руку. А я хочу, чтобы при наведении на ссылку курсор менялся на другой, тоже мой, для текста - у меня тоже свой курсор есть... вообщем у меня 12 курсоров на все случаи жизни (обычный, рука, изменения размера окна, песочные часы, для текста и др.) А как в CSS это вставить?
8. Анна - 17 Октября, 2004 - 16:50:05 - перейти к сообщению
SviMik
Привет!
Привет!
Цитата:
чтобы при наведении на ссылку курсор менялся на другой, тоже мой, для текста - у меня тоже свой курсор есть...
CODE:
<style type="text/css">
body {cursor:url(crest.cur);}
:link,:visited,:active {cursor:url(sc.cur);}
</style>
<style type="text/css">
body {cursor:url(crest.cur);}
:link,:visited,:active {cursor:url(sc.cur);}
</style>
9. SviMik - 17 Октября, 2004 - 16:58:36 - перейти к сообщению
А для простого текста?
вот мой CSS:
CODE:
< STYLE TYPE="text/css"> <!--
body
{background:#00FFFF;
text:#000000;
link:#0000FF;
vlink:#0000FF;
alink:#0000FF;
topmargin:0;
leftmargin:0;
marginwidth:0;
marginheight:0;
scrollbar-face-color: blue;
scrollbar-3dlight-color: 5555ff;
scrollbar-base-color: green;
scrollbar-track-color: 00BFFF;
scrollbar-arrow-color: black;
CURSOR: url('mauscursor/arrow.cur');
}
A:link {cursor:url('mauscursor/finger.cur');color:#0000ff}
A:visited {cursor:url('mauscursor/finger.cur');color:#0000ff}
A:active {cursor:url('mauscursor/finger.cur');color:#0000ff}
A:hover {cursor:url('mauscursor/finger.cur');background:#00ff00}
#divLoadCont {position:absolute; z-index:500; left:0px; top:0px; width:100%; height:98%; clip:rect(0px 100% 100% 0px); background-color:#ffffff; layer-background-color:#ffffff;}
#divLoad1 {position:absolute; layer-background-color:silver; background-color:silver;}
#divLoad2 {position:absolute; left:0px; top:0px; layer-background-color:navy; background-color:navy;}
#divLoadText {position:absolute; background-color:transparent; font-family:arial,helvetica,sans-serif; color:navy; font-size:14px;}
--> </STYLE>
< STYLE TYPE="text/css"> <!--
body
{background:#00FFFF;
text:#000000;
link:#0000FF;
vlink:#0000FF;
alink:#0000FF;
topmargin:0;
leftmargin:0;
marginwidth:0;
marginheight:0;
scrollbar-face-color: blue;
scrollbar-3dlight-color: 5555ff;
scrollbar-base-color: green;
scrollbar-track-color: 00BFFF;
scrollbar-arrow-color: black;
CURSOR: url('mauscursor/arrow.cur');
}
A:link {cursor:url('mauscursor/finger.cur');color:#0000ff}
A:visited {cursor:url('mauscursor/finger.cur');color:#0000ff}
A:active {cursor:url('mauscursor/finger.cur');color:#0000ff}
A:hover {cursor:url('mauscursor/finger.cur');background:#00ff00}
#divLoadCont {position:absolute; z-index:500; left:0px; top:0px; width:100%; height:98%; clip:rect(0px 100% 100% 0px); background-color:#ffffff; layer-background-color:#ffffff;}
#divLoad1 {position:absolute; layer-background-color:silver; background-color:silver;}
#divLoad2 {position:absolute; left:0px; top:0px; layer-background-color:navy; background-color:navy;}
#divLoadText {position:absolute; background-color:transparent; font-family:arial,helvetica,sans-serif; color:navy; font-size:14px;}
--> </STYLE>
10. Анна - 17 Октября, 2004 - 17:21:17 - перейти к сообщению
SviMik
Смотри сюда...
Вот CSS-ка:
Вот текст на страничке:
(Добавление)
Кстати, вот здесь у тебя:
не нужны link, vlink, alink
Ты ведь ниже указываешь какими будут ссылки.
Смотри сюда...
Вот CSS-ка:
CODE:
<style type="text/css">
body {
cursor:url(crest.cur);
}
A:link,:visited,:active {
cursor:url(sc.cur);
}
.text1 {
cursor:url(drjones.cur);
}
.text2 {
cursor:url(test.cur);
}
</style>
<style type="text/css">
body {
cursor:url(crest.cur);
}
A:link,:visited,:active {
cursor:url(sc.cur);
}
.text1 {
cursor:url(drjones.cur);
}
.text2 {
cursor:url(test.cur);
}
</style>
Вот текст на страничке:
CODE:
Текст - курсор "crest.cur" <BR>
<a href="http://tvoyweb.ru">Ссылка - курсор "sc.cur"</a><BR>
<div class=text1>текст - курсор "drjones.cur"</div><BR>
<div class=text2>текст - курсор "test.cur"</div><BR>
Текст - курсор "crest.cur" <BR>
<a href="http://tvoyweb.ru">Ссылка - курсор "sc.cur"</a><BR>
<div class=text1>текст - курсор "drjones.cur"</div><BR>
<div class=text2>текст - курсор "test.cur"</div><BR>
(Добавление)
Кстати, вот здесь у тебя:
CODE:
< STYLE TYPE="text/css">
body
{background:#00FFFF;
text:#000000;
link:#0000FF;
vlink:#0000FF;
alink:#0000FF;
topmargin:0;
< STYLE TYPE="text/css">
body
{background:#00FFFF;
text:#000000;
link:#0000FF;
vlink:#0000FF;
alink:#0000FF;
topmargin:0;
не нужны link, vlink, alink
Ты ведь ниже указываешь какими будут ссылки.