• ベストアンサー

HTMLタグでマウスポインタを変えたい

マウスの形を変えるHTMLってありますか？ まだHP初心者なんで、あんまわかりません 動くタイプなんですができますでしょうか・・・？ 素材はあるのです、HTMLさえわかれば・・・ってヤツです。 よろしくおねがいします

  • HTML
  • 回答数3
  • ありがとう数0

質問者が選んだベストアンサー

  • ベストアンサー
  • dayowl
  • ベストアンサー率56% (84/148)
回答No.3

IE6以降に限定すればVegasさんのご紹介URLが参考になると思います。 私も参考になりました（笑） >できるならマスコット系でもオｋです。 一応サンプルをご紹介します。 私のオリジナルなので動作保障などありませんのでご了承ください。 ↓ここから・・・ <!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」を画像ファイル名に変更する。 以上で動くと思います。

その他の回答 (2)

  • Vegas
  • ベストアンサー率60% (635/1056)
回答No.2

■ カーソルを好きな画像で指定する http://masaboo.cside.com/new_css1/cs_36.htm 画像ファイルの拡張子に注意が必要なのと 表示されるブラウザに制限があるということを念頭に置いて下さい カーソルやポインタの形を変えるだけなら↓コチラ http://zumirin.cool.ne.jp/kowaza/cursor.htm ※個人的見解ですが、マウスポインタに追尾してくるタイプは鬱陶しい事この上ないです

  • dayowl
  • ベストアンサー率56% (84/148)
回答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などを指定することもできます。 「動くタイプ」というのはマウスカーソル自体が動くという意味だと解釈すると、それはできないと思います。 但し、マウスカーソルにくっついていくマスコットのようなものならできますが、それではダメなんですよね？

kokumaryu
質問者

補足

>「動くタイプ」というのはマウスカーソル自体が動くという意味だと解釈すると、それはできないと思います。 >但し、マウスカーソルにくっついていくマスコットのようなものならできますが、それではダメなんですよね？ できるならマスコット系でもオｋです。 マウス自体はムリと考えるとソッチのほうがイイかもしれません。自分テキに

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. HTML

関連するQ&A

  • マウスポインタがおかしい・・・

    ＨＰを閲覧している時、マウスポインタが手の形の状態です。 左クリックするとパーの形がグーに変化します。 当然グーの状態でマウスを動かすと上下にスクロールします。 ＨＰのテキストボックス内やワード上ではマウスポインタを文字の上 に乗せると「Ｉ」の形に変わり、文字や文章を選択したり できますが、HP上の単なる文章上で手の形のままでは文字や文章を 選択したりできません。コピペができなくて困っています。 どなたか対処方法を教えて頂けないでしょうか？

  • HTMLタグを作成

    私は今、ホームページ作成にがんばっています。そこで、自分のHP素材が作りたいのですが、HTMLタグの作成方法が分りません。またそことについて勉強したいです。この二つについて教えてくださいよろしくお願いします。

  • マウスポインタをある形に変えたい

    ちょっとかじっただけの初心者です。（技術者向けのカテゴリーですいません） スタイルシートでマウスポインタを 画面全体を横切る十字（つまり、クリックするところが縦線と横線のクロス点になっている、線は画面全体にわたっている） といった形にしたいのですが、どうすればよいでしょうか。 以前、どこかのＨＰで見たことがあるのですが、どこか忘れてしまったのでソースの確認もできず、検索してもマウスポインタを特定の画像にかえる方法しか見つけられず困っています。 それを応用できるだけの知識もないので、詳しい方、なにかご教授お願いします。

    • ベストアンサー
    • HTML
  • ポインターを右矢印にするHTMLは？

    HPビルダーでHPを作っています。 リンクを張っている所にきた場合だけ、 ポインターの形を右もしくは左向き矢印に変えたいのですが どういうHTMLをどこに入れたらいいでしょうか？ 教えてください。

  • HTMLタグで続きを読む

    はじめまして。書き込むのは初めてですがいつもここには助けられている者です。 今現在私はＨＴＭＬタグでＨＰを作っているのですが、この前に使っていたＦＣ２ブログでは「続きを読む」という機能があり、とても重宝していたので、ＨＴＭＬでも使いたいなあと思っているのです。 とりあえずやりたい事(理想)としては、 ・ＣＳＳを使わない(javascriptは可 ・別窓表示にしない の２つが大前提になっています。ＣＳＳは、既に素材を使わせていただいているので、加工の方法が分からないからです。もし加工の方法を教えていただけるならありがたいです。

  • HTML以外のタグ

    カテゴリが違っていたらすみません。 初心者でも簡単に無料でHPが作れるサイトでHP(パソコン、ドコモ、AU、ボーダフォンから閲覧可能)を作ったのですが、インデックス名の欄にそのサイトの独自タグやHTML文書を入力すると一部の機種から閲覧ができない、という注意書きがあり、<font>や<center>のタグを使ったら、やはり一部の機種で見れないといわれました。 パソコンはメールやインターネットを時々利用するくらいで全くの初心者です。HPを作ることになって少しタグについて調べたくらいなので、私が使っているタグはHTML文書という類のものである(のですよね？)ことくらいしかわからず、他に調べてもよくわかりませんでした。 センタリングや文字の色・大きさをかえて見やすいページを作りたいのでタグを使用したいのですが、HTML以外のタグはあるのでしょうか？どなたかよろしくお願いします。

    • ベストアンサー
    • HTML
  • HTMLに関する質問です。

    HPに取り付けるHTMLで今困っています。 一つ目は、マウスの周りを回るテキストのHTML…マウスストーカーの類です。楕円形に回るものでも、渦状に回るものでもなくて、円形にマウスの周りを回るタイプです。 ただ回るだけでいいです。 二重に逆方向に回る物ならなおいいです。 大きさが指定できるタイプでお願いします。 二つ目は、ページが切り替わるときのHTMLです。 JAVAかも知れません。 こちらのサイトのようなものを一番求めています…{http://glan.dragon-inside.jp/} 名前だけでもご存知の方はご返信ください。

  • HTMLタグとは・・・

    パソコン初心者なんですが、最近ブログを始めましたが、HTMLタグを使って文字色を変える事が出来るって言われたんですが、HTMLタグってなんですか？ どうしたらいいのですか？ ご存知の方が居られましたら教えてください。

  • マウスポインタ

    こんにちは。どこで質問すればいいのか分からなかったのでこちらで失礼します。 よく、かわいいマウスポインタのHPを見かけます。私もかわいいマウスポインタにしたいなぁ、と思い、流れ星のような、カーソルの後からキラキラがついてくるようなものを探しているのですが見つかりません。どなたか知っている方がいましたら、教えてください お願いします。

  • マウスポインタが手の形にならないんです！！

    ＨＰを作成してます。 リンクをはってるんですがマウスポインタが手の形にかわらないんです。　でもクリックするとちゃんと飛びます。 何か記述がたりないんでしょうか？ どこが悪いのかもよく分かりません。 お願いします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する