Javascriptでマウスポインタの画像操作は可能でしょうか?

このQ&Aのポイント
  • WinIE6.0でHPを作ってます。テーブルのセル単位でリンクが出来るようにしたいです。
  • マウスポインタが「手」の形にならないため、クリッカブルであることが分かりづらいです。
  • JavascriptでonMouseoverの処理の中でマウスポインタの表示を制御することは可能でしょうか?
回答を見る
  • ベストアンサー

Javascriptでマウスポインタの画像操作は可能でしょうか?

教えてください! WinIE6.0でHPを作ってます。 テーブルのセル単位でリンクが出来るように作ろうとしてます。 <td id="link" onMouseover="over_color(*);" onMouseout="out_color(*);" onClick="td_link(*);"></td> とかしておいて、 var link_url = new Array(); link_url[0] = "http://***"; link_url[1] = "http://***";"; link_url[2] = "http://***";"; link_url[3] = "http://***";"; function over_color(no) { link[no].bgColor = "#000000"; } function out_color(no,col) { link[no].bgColor = ""; } function td_link(no) { location.href = link_url[no]; } 上の例ではマウスをセルのせると黒くなり、クリックで指定のURLに飛ぶようになります。一応動きます。 が! マウスポインタが「手」の形にならないんです! あたりまえと言えばあたりまえなんですが…。 やってみて気づいたのですが、これだとクリッカブルであることが非常に分かりづらいんです。 なんとかonMouseoverの処理の中でマウスポインタの表示を制御することは可能でしょうか? (全く他の方法で<td>をクリッカブルにする方法でも構いません!) 教えてください!よろしくお願いいたします!

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

  • ベストアンサー
  • BlueRay
  • ベストアンサー率45% (204/453)
回答No.1

<td id="link" onMouseover="over_color(*);" onMouseout="out_color(*);" onClick="td_link(*);"></td> ↓ <td id="link" onMouseover="over_color(*);" onMouseout="out_color(*);" onClick="td_link(*);" style="cursor:hand"></td> 如何でしょうか?

miku0004
質問者

お礼

すごい! できた! しかも簡単! スタイルシートかあ…。"cusor"なんてものがあったとは…。 (これって常識すか?) 正直大変助かりました。 ありがとうございました!

関連するQ&A

  • <table>をリンクボタンにした時、マウスオーバーでポインタの形が変わるようにするには?

    宜しくお願い致します。当方htmlで簡単なHPがやっと作成出来るレベルです。 テーブル<table>のセル内をボタンにし、それ(下記の例では「新着情報」)が押されたら、分割されたフレームの「frame1」にaaaaa.htmlを開かせるのですが、下記の記述で最初の状態、マウスオーバー、マウスアウト、リンクは上手く行くのですが、マウスオーバー時にポインタの形を矢印(cursorの設定値でいう「pointer」)にしたいのですが、どなたかお分かりになる方がいらっしゃいましたら、お教え下さい。 尚、初心者ですので、下記の記述は文法上間違えていると思います。 宜しくお願い致します。 <tr> <a href="aaaaa.html" Target="frame1"> <td height="20" bgcolor="blue" onmouseover="this.style.backgroundColor='yellow'" onmouseout="this.style.backgroundColor='blue'"><font color="darkblue" size="2">新着情報</font></td></tr>

    • ベストアンサー
    • HTML
  • セルにマウスが

    下記はセルにマウスが通過と離れた時に背景色を変えるPerlのコードです、通過したとき透明にしたいのですが、よろしくお願いします。 <SCRIPT LANGUAGE="JavaScript"> <!-- var evobj; function over(bg){ evobj=event.srcElement; if(evobj.tagName=="TR"||evobj.tagName=="TABLE"){ return } while(evobj.tagName!="TD"){ evobj=evobj.parentElement; } evobj.style.backgroundColor=bg; } function out(bg){ evobj.style.backgroundColor = bg; } //--> </SCRIPT> @bgcolor = qw(NAVY BLUE WHITE PINK); $bcolor = $bgcolor[int(rand($#bgcolor + 1))]; print "<TR onMouseOver=\"over(\'red\')\" onMouseOut=\"out(\'$bcolor\')\">

  • テーブルの背景色を複数変更する

    テーブルにて、onMouseOverで背景色を変え、 onMouseOut にて背景色を戻すスクリプトを作っています。 セル一つならば変更できますが、複数のセルに依存関係があり、依存関係があるセル同士はそのセルにマウスオーバーされると依存関係があるセル全ての色を変更したいと思っています。 いろいろと探しているのですが、見つかりません。 以下のようなサンプルで 1 と 4 が一緒に変更できないものでしょうか。 よろしくお願いします。 <html> <head> <title>テーブルの色を変える</title> <script language="JavaScript"> <!-- // b_color(idname,cn); // 背景色を変える // idname: 色変更したいタグid; // cn:色変更法 function b_color(idname,cn) { // alert(idname); // debug alert if (document.getElementById) { document.getElementById(idname).style.backgroundColor = cn; }else{ // alert("あなたのブラウザには対応しておりません。"); } } if (! document.getElementById) { document.write("あなたのブラウザには対応しておりません。マウスを動かしても色は変えられません。<br>"); // マウス移動でいちいちalertが出ると煩わしいので、最初に表示しておく } //--> </script> </head> <body> <table border="1"> <tr> <td id="11" bgcolor="#cccccc" onMouseOver="b_color('11','#ff0000');" onMouseOut="b_color('11','#0000ff');">ここ1</td> <td>ここ2</td> </tr> <tr> <td>ここ3</td> <td id="11" bgcolor="#cccccc" onMouseOver="b_color('11','#ff0000');" onMouseOut="b_color('11','#0000ff');">ここ4</td> </tr> </table> </body> </html>

  • マウス位置取得方法

    いつもお世話になっております。 現在tableの各セルにonmouseoverを入れて、マウスの動きに追従してセルの色が変わるものを作っています。 その際、マウスを高速で動かすとマウスに色の変化が付いてこない状態になってしまいます。 原因は td.style.backgroundColor="#FFOOFF" という処理は行われているのですが、マウスを動かし続けるとonmouseoverが呼ばれ続けて、styleの表示の反映が遅れているようです。 そこで解決する方法を考えて調査したのですが方法がわからなかったのでお聞きします。 方法)onmouseoverが呼ばれたセルと現在マウスがあるセルを比較して違うものであった場合、関数を終了する。 この方法は、マウスが連続して動いているときは関数を処理しないでおく方法ですが、関数を呼ばれた後にマウスが動いたことを察知する方法がわかりません。 javascriptはマルチスレッドができないので、関数のそのステップ現在でのマウスの位置を知る方法がありましたらご教授願います。 現在のコードは以下のようなものです。 <script> function hoge() { //通過したセルの色を変える } </script> <table> <TR> <TD onmouseover="hoge();"></TD> ..... <TD onmouseover="hoge();"></TD> </TR> </TABLE> このようなtableのセルが300ほどあります。 以上、何かできることがありましたら、ちょっとしたことでも情報をいただきたいです。 よろしくお願いします。

  • 簡単なJavaScriptなんですが

    セル内にボタン(menu01.gif)があって、マウスオーバーしたら別の画像(menu02.gif)に変わり、クリックたら別のファイルに飛ぶ、というJavaScriptを教えてください。 Dreamweaver3で作ったら、OnClickの設定ができずマウスオーバーしただけでURLに飛んでしまうのですがどう直していいのか分からないのでよろしくお願いします。 <td> <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image10','','img/menu02.gif',1);MM_goToURL('parent','index.html');return document.MM_returnValue"> <img src="img/menu01.gif" width="167" height="20" border="0" name="Image10"> </a> </td>

  • 異なるセルに触れる度、テーブル背景画像もそれぞれ変化させる方法

    オンマウスで異なるセルなどの背景を変える方法 http://okwave.jp/qa4890043.html で質問した者です。 その質問で教えて頂いたやり方(※1)を応用して、 異なるセルに触れる度に、テーブル自体の背景もそれぞれ異なる画像に変化させる方法を教えて下さい。 マウスオーバーで変化、マウスアウトで元の背景に戻る、というかたちでお願いします。  * * *  テーブルにaaa.jpgという背景が設定されているとして、 <table><tr> <td>1111</td> ←このセルに触れるとテーブル背景がbbb.jpgに変化。 <td>2222</td> ←このセルに触れるとテーブル背景がccc.jpgに変化。 </tr></table> どのセルでもマウスアウトで元のaaa.jpgに戻る。 (※1) <script> function change(obj){ var p=obj.parentNode; while(p){ if(p.nodeName=="TABLE") break; p=p.parentNode; } p.style.backgroundImage="url(****.jpg)"; } </script> <table> <tbody> <tr> <td onMouseover="change(this)">1111</td> <td>2222</td> <td>3333</td> </tr> </tbody> </table> 私からのレスは明日以降になってしまいますが、宜しくお願いします。

    • ベストアンサー
    • HTML
  • 画像にエリア指定をしてマウスオーバーすると画像が変わり、さらにそのマウ

    画像にエリア指定をしてマウスオーバーすると画像が変わり、さらにそのマウスオーバーがフェードで切り替わるということはできないでしょうか? 画像にエリア指定をしてマウスオーバーすると画像が変わるということはできたのですが その画像の切り替えをフェードでできないでしょうか 問題のコードです <script>function over(num){ document.getElementById("mg").src="site02/ex/ex_top03"+num+".jpg" } function out(){ document.getElementById("mg").src="site02/ex/ex_top03.jpg" } </script> <div id="main_content_ex"> <img id="mg" src="site02/ex/ex_top03.jpg" usemap="#hisigata" border="0" /> <map name ="hisigata"> <area shape="rect" coords="10,498,149,532" href="site02/lightbox/ex.htm" onmouseover="over(1)" onmouseout="out()"> <area shape="rect" coords="582,468,790,496" onmouseover="over(2)" onmouseout="out()"> <area shape="rect" coords="800,465,932,493" onmouseover="over(3)" onmouseout="out()"></div> jQueryなどのフェードのエフェクトを使用しようかとも思ったのですが、javascriptでmouseOverの画像を指定しているためどう書いていいかわからなくなってしまいました こういう質問のしかたで大変恐縮なのですが 誰かご教授願えないでしょうか?? scriptもjQueryも基本を理解できておらず、大変困っています。 大変申し訳ありませんが、お願いいたします。

  • javascript画像の切り替えについて

    javascriptでの画像切り替えについて、どなたか教えていただけますでしょうか? やりたいことは、ユニクロの商品ページのカラー選択のような、↓↓ http://store.uniqlo.com/jp/CSaGoods/472513 サムネイルにマウスオーバーするとメイン画像が切り替わり、 マウスアウトすると、一番最初の画像に戻り、 クリックすると、選択した画像が固定されてメイン画像に表示される、 という動きです。 実際に下のようなソースを作ったのですが、 マウスオーバーとマウスアウトはきちんと動作しても、 クリックしたときに画像が固定されなくて困っています。 どなたか教えて頂けませんでしょうか? よろしくお願いいたします。 ------------------------------------------- <div id="item_main">  <img src="メイン画像のURL" alt="" name="main" /></div>    <div id="item_sum">   <p>    <img src="サムネイルのURL1" width="24" height="24" onMouseOver="document.main.src='メイン部分に表示させたい画像のURL1;" onMouseOut="document.main.src='メイン画像のURL';" onClick="document.main.src='メイン部分に表示させたい画像のURL1';" /> <img src="サムネイルのURL2" width="24" height="24" onMouseOver="document.main.src='メイン部分に表示させたい画像のURL2;" onMouseOut="document.main.src='メイン画像のURL';" onClick="document.main.src='メイン部分に表示させたい画像のURL1';" /> <img src="サムネイルのURL3" width="24" height="24" onMouseOver="document.main.src='メイン部分に表示させたい画像のURL3;" onMouseOut="document.main.src='メイン画像のURL';" onClick="document.main.src='メイン部分に表示させたい画像のURL1';" /> </p> </div> </div> ----------------------------------------------------

  • javascriptを短く方法ありますか?

    以下のようなテーブル行に付けたすごく長いJavascriptを class="line_color" のようにCSS等にまとめて 記述する方法はあるでしょうか? ■現在 <tr onmouseover="setPointer(this, 0, 'over', '#DDDDDD', '#CCFFCC', '#FFCC99');" onmouseout="setPointer(this, 0, 'out', '#DDDDDD', '#CCFFCC', '#FFCC99');" onmousedown="setPointer(this, 0, 'click', '#DDDDDD', '#CCFFCC', '#FFCC99');"> <td>テスト</td> </tr> ■理想 <tr class="line_color"><td>テスト</td></tr>

  • テーブルセルの列での背景色の変更

    3行3列のtableで各セルにマウスカーソルをのせた時に そのセルの列すべての背景色を変えるJavaスクリプトを 作成したのですが、うまく動作しません。 どこか間違っているでしょうか。 (たとえば、2-2のセルにマウスカーソルをのせると  1-2、2-2、3-2のセルの背景色をかえるスクリプトです) ●Java function onColor(col) { document.all[col].bgColor = '#00ffff'; } function outColor(col) { document.all[col].bgColor = '#ffffff'; } ●HTML <TABLE BORDER="1" BGCOLOR="#ffffff" cellpadding="0" cellspacing="0"> <colgroup id="a1" span="1" width="25" align="center"> <colgroup id="a2" span="1" width="25" align="center"> <colgroup id="a3" span="1" width="25" align="center"> <tr align="center"> <td onMouseOver="javascript: onColor('a1');" onMouseOut="javascript: outColor('a1');">1-1</td> <td onMouseOver="javascript: onColor('a2');" onMouseOut="javascript: outColor('a2');">1-2</td> <td onMouseOver="javascript: onColor('a3');" onMouseOut="javascript: outColor('a3');">1-3</td> </tr> <tr align="center"> <td onMouseOver="javascript: onColor('a1');" onMouseOut="javascript: outColor('a1');">2-1</td> <td onMouseOver="javascript: onColor('a2');" onMouseOut="javascript: outColor('a2');">2-2</td> <td onMouseOver="javascript: onColor('a3');" onMouseOut="javascript: outColor('a3');">2-3</td> </tr> <tr align="center"> <td onMouseOver="javascript: onColor('a1');" onMouseOut="javascript: outColor('a1');">3-1</td> <td onMouseOver="javascript: onColor('a2');" onMouseOut="javascript: outColor('a2');">3-2</td> <td onMouseOver="javascript: onColor('a3');" onMouseOut="javascript: outColor('a3');">3-3</td> </tr> </TABLE>