No.3ベストアンサー
- 回答日時:
IE6以降に限定すればVegasさんのご紹介URLが参考になると思います。
私も参考になりました(笑)
>できるならマスコット系でもオkです。
一応サンプルをご紹介します。
私のオリジナルなので動作保障などありませんのでご了承ください。
↓ここから・・・
<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<html lang="ja">
<head>
<title>カーソルにくっついているマスコット</title>
<style type="text/css">
<!--
/* rect(0,32,32,0)で画像の基本サイズをpixelで指定する */
/* この例は、マスコット画像が32x32pixelの場合 */
#mascot { position:absolute;top:100;left:100; width:150;height:40;clip:rect(0,32,32,0) }
//-->
</style>
<script language="javascript1.2">
<!--
spanName = "mascot";
document.onmousemove = doMouseMove;
var itemOffsetX = 5;//マスコットをカーソルからどれだけ離すか(X方向)
var itemOffsetY = 5;//マスコットをカーソルからどれだけ離すか(Y方向)
// Netscape対応を考慮するなら
// チェックボックスなどをクリックできなくなるので「0」にはしないこと
NN = (document.layers) ? 1 : 0;
NN6 = (document.getElementById && !document.all) ? 1 : 0;
IE = (document.all) ? 1 : 0;
function selectImage(image_file) {
var msgHTML = '<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=Shift_JIS">';
if (document.parameter.show_mascot.checked) {
msgHTML += '<SPAN STYLE="font:10pt Osaka,Arial; color:#505050">';
msgHTML += "<img src='" + image_file + "'>";
msgHTML += '</SPAN>';
outputLAYER(spanName, msgHTML);
}
}
function doMouseMove(e) {
var mouseX = 0;
var mouseY = 0;
if (document.parameter.show_mascot.checked) {
if (NN) {
mouseX = e.pageX + itemOffsetX;
mouseY = e.pageY + itemOffsetY;
}
if (NN6) {
mouseX = e.pageX + itemOffsetX;
mouseY = e.pageY + itemOffsetY;
}
if (IE) {
mouseX = document.body.scrollLeft + event.clientX + itemOffsetX;
mouseY = document.body.scrollTop + event.clientY + itemOffsetY;
}
moveLAYER(spanName, mouseX, mouseY);
}
else {
hideLAYER(spanName);
}
}
function outputLAYER(layName, html){
if(NN) {//NN用
document.layers[layName].document.open();
document.layers[layName].document.write(html);
document.layers[layName].document.close();
}
if(NN6){//NN6用
document.getElementById(layName).innerHTML = html;
}
if(IE){//IE用
document.all(layName).innerHTML = html;
}
}
function moveLAYER(layName, posX, posY){
if (NN) { //NN用
document.layers[layName].moveTo(posX, posY);
}
if (NN6) { //NN6用
document.getElementById(layName).style.left = posX;
document.getElementById(layName).style.top = posY;
}
if (IE) { //IE用
document.all(layName).style.pixelLeft = posX;
document.all(layName).style.pixelTop = posY;
}
}
function hideLAYER(layName){
moveLAYER(layName, -1000, -1000);
}
-->
</script>
<!-- selectImage('mascot01.jpg')の「mascot01.jpg」をマスコットのファイル名に変える -->
<body onLoad="selectImage('mascot01.jpg')">
<span ID="mascot"> </span>
マスコットの表示サンプル<br>
<form name="parameter">
マスコットの表示:<input type="checkbox" name="show_mascot" checked=ture>
</form>
マウスカーソルにmascot01.jpgがくっつきます。<br>
アニメーションGIFファイルなどを指定しても大丈夫だと思います。<br>
個人的には鬱陶しいので、マスコットのON/OFFはできるようにしておいて欲しいなと思います。<br>
マウスがウインドウから外れたときにマスコットが置き去りになってしまう点、改良すべきです。<br>
</body>
</html>
↑ここまでをコピーして、index.htmlというファイルを作成してください。
画像ファイルを用意して、index.htmlを同じフォルダに保管します。
selectImage('mascot01.jpg')の「mascot01.jpg」を画像ファイル名に変更する。
以上で動くと思います。
No.2
- 回答日時:
■ カーソルを好きな画像で指定する
http://masaboo.cside.com/new_css1/cs_36.htm
画像ファイルの拡張子に注意が必要なのと
表示されるブラウザに制限があるということを念頭に置いて下さい
カーソルやポインタの形を変えるだけなら↓コチラ
http://zumirin.cool.ne.jp/kowaza/cursor.htm
※個人的見解ですが、マウスポインタに追尾してくるタイプは鬱陶しい事この上ないです
No.1
- 回答日時:
マウスのカーソル自体を変えるのはあまり自由度が高くありません。
こんな感じで、リンクの上にマウスカーソルがくるとカーソルの絵が変わるというものです。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<body>
<a href="help.htm" style="cursor: help;">[ヘルプ]</a>
</body>
</html>
「cursor:help」でカーソルを指定しているわけですが
他にも「help」の代りにcrosshair、default、pointerなどを指定することもできます。
「動くタイプ」というのはマウスカーソル自体が動くという意味だと解釈すると、それはできないと思います。
但し、マウスカーソルにくっついていくマスコットのようなものならできますが、それではダメなんですよね?
この回答への補足
>「動くタイプ」というのはマウスカーソル自体が動くという意味だと解釈すると、それはできないと思います。
>但し、マウスカーソルにくっついていくマスコットのようなものならできますが、それではダメなんですよね?
できるならマスコット系でもオkです。
マウス自体はムリと考えるとソッチのほうがイイかもしれません。自分テキに
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・14歳の自分に衝撃の事実を告げてください
- ・架空の映画のネタバレレビュー
- ・「お昼の放送」の思い出
- ・昨日見た夢を教えて下さい
- ・ちょっと先の未来クイズ第4問
- ・【大喜利】【投稿~10/21(月)】買ったばかりの自転車を分解してひと言
- ・メモのコツを教えてください!
- ・CDの保有枚数を教えてください
- ・ホテルを選ぶとき、これだけは譲れない条件TOP3は?
- ・家・車以外で、人生で一番奮発した買い物
- ・人生最悪の忘れ物
- ・【コナン30周年】嘘でしょ!?と思った○○周年を教えて【ハルヒ20周年】
- ・ハマっている「お菓子」を教えて!
- ・最近、いつ泣きましたか?
- ・夏が終わったと感じる瞬間って、どんな時?
- ・10秒目をつむったら…
- ・人生のプチ美学を教えてください!!
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・都道府県穴埋めゲーム
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
ユーザーが更新ボタンを押さな...
-
プルダウンと入力を両方行う検...
-
ウインドウを縮小しても文字を...
-
<a href="#" …>の意味を教えて...
-
ウィンドウ名の設定
-
SCRIPT5007: 未定義または NULL...
-
bodyにidをつける理由は何ですか?
-
URLを引数とし、フレーム間で渡...
-
JavaScriptでのEnterキーとAlt+...
-
JAVAでリンクボタンを作成して...
-
Vbscriptで自分自身のウィンド...
-
(Javascript)印刷するファイル...
-
外部ファイル名を変数で指定で...
-
子画面で画像を表示したい
-
"mailtoでメールの【氏名】【性...
-
JavascriptとJqueryを混在し記述
-
window.onloadイベントの任意実...
-
JavaScriptからVBScriptの呼び...
-
javascriptとApacheの設定
-
スマホ上で、左右スワイプで次...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
ウインドウを縮小しても文字を...
-
ユーザーが更新ボタンを押さな...
-
ランダムにページにアクセスしたい
-
【SSI】include file、include ...
-
Windowsログオンユーザの取得
-
更新日時を偽装したい。方法は...
-
ページを訪問者にたった一度だ...
-
プルダウンと入力を両方行う検...
-
Html(表)のExcel出力
-
「街」や「428」や「かまいたち...
-
WebBrowserコントロール(続き)
-
VBAでIEの操作→サブウインド...
-
HP上のPDFファイルを保存禁止...
-
ifraameでのランダム表示時に不...
-
[html] リンク先のページのラジ...
-
HTML初心者です、画像表示でき...
-
HTML5のcanvasで描画がされない
-
SDカードに入れたjavascriptフ...
-
リンク先を広告ページ経由で表...
-
<a href="#" …>の意味を教えて...
おすすめ情報