フォームボタンにマウスオーバーで色変化をする方法
- フォームボタンにマウスオーバーすると色が変化する方法をまとめました。
- 外部スタイルシートとHTML直接記述を使ってマウスオーバーで色変化をするフォームボタンについて解説します。
- 複数のフォームボタンに同じ効果を一括で指定する方法について説明します。
- ベストアンサー
数カ所のフォームボタンにonMouseOverを一括指定
//外部スタイルシート抜粋 .button{ color:#000000; background-color:#ffec93; border:1px solid #ffbb55; } //HTML本文抜粋 <INPUT class=button onmouseover="this.style.backgroundColor='#FFDF48'" onfocus="this.style.backgroundColor='#FFDF48'" onmouseout="this.style.backgroundColor='#ffec93'" type=submit value=送信> 上記のように、外部スタイルシートとHTML直接記述で、マウスカーソル操作により色変化をするフォームボタンが、同一ページ内に数カ所あります。 全部の箇所が同じ効果なので、外部スタイルシートのようにHTMLに直接記述しているonMouseOver等を一括指定できれば非常に便利なのですが、これを実現する方法はないものでしょうか。
- flowerpark
- お礼率84% (42/50)
- HTML
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
function addButtonEvent() { var buttons = new Array(); buttons = document.getElementsByTagName('input'); for(var i=0;i<buttons.length;i++) { if(buttons[i].className == 'button') { buttons[i].onmouseover = function(){this.style.backgroundColor='#FFDF48';} buttons[i].onfocus = function(){this.style.backgroundColor='#FFDF48';} buttons[i].onmouseout = function(){this.style.backgroundColor='#FFEC93';} } } } これを適当な名前で外部javascriptとして保存し、htmlのヘッダ部で読み込み、<body>で関数を呼び出せばOKです。 <script type="text/javascript" src="???.js"></script> </head> <body onload="addButtonEvent()"> class="button" の全ての<input>に適用されます。 #つーか、IE以外のOperaやMozilla系のブラウザなら input.button:hover{background-color:#xxx;} って感じでスタイルシートでできるんだけど。
関連するQ&A
- onmouseoverはCSS参照に含められるか？
<div style="color: blue;" onmouseover="this.style.color='red'" onmouseout="this.style.color='blue'">あああ</div>を、 <style type="text/css"> <!-- div { onmouseover="this.style.color='red'"; onmouseout="this.style.color='blue'; } --> </style> みたいには書けませんか？ a:hoverだったらできるのは承知していますが、 タグが<a>でなく<div>なので、onmouseover、onmouseoutを使わざるを得ず、 さらにonmouseover、onmouseoutはCSSでなくJSだと思うのですが。
- ベストアンサー
- CSS
- onmouseoverを外部にまとめる
お忙しいところすいません 以下のようなマウスオーバーで背景が変わるテーブルを制作してますが、長くなるので「onmouseover」等をまとめる方法があれば教えてください。 ■---元----------------------■ <head> </head> <body> <table> <tr> <tr> <td onmouseover="this.style.backgroundColor='#ffffcc';" onmouseout="this.style.backgroundColor='#68ceff'" bgcolor="#68ceff">リンク</td> </tr> <tr> <td onmouseover="this.style.backgroundColor='#ffffcc';" onmouseout="this.style.backgroundColor='#68ceff'" bgcolor="#68ceff">リンク</td> </tr> </table> </body> </html> ■---希望----------------------■ <head> <script language="JavaScript"> <!-- td#over { onmouseover="style.background='#ccccff'"; onmouseout="style.background='#68ceff'" } //--> </script> </head> <body> <table> <tr> <tr> <td id="over">リンク</td> </tr> <tr> <td id="over">リンク</td> </tr> </table> </body> </html> -------------------------------- ＣＳＳもJavaScript初心者ですので全く的外れな質問かもしれませんがよろしくお願いします。
- ベストアンサー
- JavaScript
- この部分をスタイルシート書きには？
1台のPCをサーバ＆クライアントにしています。 ただ今PHPとPostgresqlの勉強をしています。 いつも質問に答えてくれてありがとうございます。 以下のソースは、他の質問を参考にして テーブル上でカーソルをのせると その行の色が変化するものです 問題なのは print("<tr bgcolor='yellow' onMouseover=this.style.backgroundColor='gold' onMouseout=this.style.backgroundColor='yellow'>"); の部分をスタイルシートで書きたいのですが どのようにすれば宜しいですか？ －－－－－－－－－－－－－－－－－－－－－－－－－－－ <?PHP print("<table border=1 width='90%' cellpadding=3 cellspacing=0>"); この部分をスタイルシートで書きたい print("<tr bgcolor='yellow' onMouseover=this.style.backgroundColor='gold' onMouseout=this.style.backgroundColor='yellow'>"); ・ ・ ・ print("</table>"); ?>
- ベストアンサー
- HTML
- onMouseoverを利用して、セル内の背景色と文字を反転させたい
テーブルで各セルに別ページへのリンクのリストを作成しています。 onMouseover と onMouseout でマウスが上に来た時に色を変えるようにしたいのですが、背景色の変更は出来ます。 onMouseover="this.style.backgroundColor='#3a5b88'" のようにして。 問題は文字色でして、こちらの変え方が分かりません。スタイルシートでも設定しているので、文字の上にポインタが来ればスタイルシートの指定通りに色を変えられますが、タイトルにも書いたように、onMouseover時には背景色と文字色を反転させるように考えているので、セル内の文字から離れた位置にポインタが来た時には背景色が文字色に変わる（つまり文字色はそのままなので同じ色になる）ので、文字が消えてしまうのです。 なにか良い方法がありましたら教えてください。
- ベストアンサー
- JavaScript
- HTMLコーディング（onMouseOver,onMouseOut）
ＨＴＭＬコーディングで質問します。 やりたいこと：下記コードのように、<div></div>の間について、onMouseOver,onMouseOutにより、枠線を表示、非表示にする。 理由：下記コードの場合、<div></div>がない場合、「1. Hxxxx」にリンクが張られているが、呼び出されるPDFファイルの内容は、(1) Cxxxx、(2) Sxxxxを含んでいることを明確にしたい。 テスト結果：FireFoxでは狙い通りになるが、IEでは動作しない。また、DreamWeaverではエラー（HTML4.0）となります。 <div onmouseover="this.style.border='1px solid black'; this.style.padding='0px 0px 0px 0px';" onmouseout="this.style.border='0px'; this.style.padding='1px 1px 1px 1px';"> <ul> <li><a href="pdf/3.pdf">1. Hxxxx</a> <ul> <li>(1) Cxxxx</li> <li>(2) Sxxxx</li> </ul> </li> </ul></div>
- ベストアンサー
- その他（プログラミング・開発）
- css ファイルでまとめたい
以下の HTML タグがありますが、 style="width: 170; height: 20; border: 1px dashed yellowgreen" という行が数行書かれていて、これを id 宣言して、css ファイルにこの Style を記述したのですが、うまくいきませんでした。 どうすればいいのでしょうか？ ご教授よろしくお願い致します。 <body> <font color="black" id="menu5">MENU: </font><br> <a onmouseover="this.style.backgroundColor='#27595a'; menu5.innerText='AAAについて'" onmouseout="this.style.backgroundColor='#D9F4E1'; menu5.innerText=''" style="width: 170; height: 20; border: 1px dashed yellowgreen" href="AAA/AAA/" target="I5" onClick="return closeMenu(this)">AAA</A><BR> <a onmouseover="this.style.backgroundColor='#27595a'; menu5.innerText='BBBについて'" onmouseout="this.style.backgroundColor='#D9F4E1'; menu5.innerText=''" style="width: 170; height: 20; border: 1px dashed yellowgreen" href="AAA/BBB/" target="I5" onClick="return closeMenu(this)">BBB</a><BR> <a onmouseover="this.style.backgroundColor='#27595a'; menu5.innerText='CCCについて'" onmouseout="this.style.backgroundColor='#D9F4E1'; menu5.innerText=''" style="width: 170; height: 20; border: 1px dashed yellowgreen" href="AAA/CCC/" target="I5" onClick="return closeMenu(this)">CCC</A><BR> </body>
- ベストアンサー
- HTML
- ボタンフォームに対するマウスオーバー効果追加
簡単に実現できれば、程度の要望なのですが、以下のHTMLでボタン上にマウスカーソルが乗ったら (1) この人に投票する！ が赤字になる (2) kao.pngが、nikoniko.png に変わる (3) マウスを離すと(1) (2) が既定に戻る と動作させることはできますか？ なお、(1) については、inputタグに onmouseover="this.color='red'" onmouseout="this.color='blue'" を仕込んでみましたがダメでした。 <html> <head> <style type="text/css"> .btn { background-repeat: no-repeat; color: blue; background-position: left; padding-left: 25px; background-image: url(./kao.png); /* 22px x 22px */ } --> </style> </head> <body> <input type='button' name='vote' value='この人に投票する！' class='btn'/> </body> </html>
- ベストアンサー
- CSS
- マウスがinput,textarea,の上にのったときに背景画像を表示させたい
たとえばマウスが上にのったときに色を変えるには下のソースを使ってるんですが、 <input type="submit" name="submit" value="DELETE"onmouseover="this.style.backgroundColor='#ffcee7'" onmouseout="this.style.backgroundColor='#FFFFFF'"> 背景画像を表示させたいときはどうやったらいいですか？ おねがいします。
- ベストアンサー
- JavaScript
- テーブルリンクで別ウインドウで開くようにするには？
<table> <tr> <td onClick="window.location.href='a.html'" onmouseover="this.style.backgroundColor='#80FFFF';" onmouseout="this.style.backgroundColor=''" STYLE="cursor:hand;">a</td> </table> このようにしてオンマウスでTD内の色を変え、TD全体でリンクさせる時、別ウインドウで開くにはどうしたらよいですか？ それとも、テーブルリンクで別ウインドウで開く指定は出来ないんでしょうか？ <table> <tr> <td onClick="window.location.href='a.html' XXXXX" onmouseover="this.style.backgroundColor='#80FFFF';" onmouseout="this.style.backgroundColor=''" STYLE="cursor:hand;">a</td> </table> XXXXXの部分にtarget='_blank'と入れてみたんですが、今度はリンクのアクションすらしなくなってしまいました。 よろしくお願いします。
- 締切済み
- HTML
- テーブルリンクに付いて
下記のテーブルリンクを作成しましたがクリックしても説明文が表示されません どなたか教えて下さい <p align="center"> <TABLE HEIGHT=30 BORDER=1 BGCOLOR="#FFFFFF" CELLSPACING=0> <TR> <TD WIDTH=150 ALIGN="center" onClick="window.location.href='http://uye43ys.dousetsu.com/simpleVC_20110728074105.html'" onmouseover="this.style.backgroundColor='#80FFFF';" onmouseout="this.style.backgroundColor=''" STYLE="cursor:hand;">特典サービス</TD> <TD WIDTH=150 ALIGN="center" onClick="window.location.href='http://uye43ys.dousetsu.com/simpleVC_20110728075504.html'" onmouseover="this.style.backgroundColor='#80FFFF';" onmouseout="this.style.backgroundColor=''" STYLE="cursor:hand;">車検費用</TD>
- ベストアンサー
- その他([技術者向] コンピューター)
お礼
ありがとうございました。いけそうです。