- ベストアンサー
マウスがinput,textarea,の上にのったときに背景画像を表示させたい
zerosixの回答
- zerosix
- ベストアンサー率31% (47/149)
すでにある画像を変更するなら、JavaScriptで可能ですが、 存在しない領域に画像を表示させることできるのかな？ ＞あとで回答をチェックしよ。 画像を入れかえるHTMLコードは、こんな感じです。 <html> <head> <script language="JavaScript"> <!-- document.images[0].src = "aaa.jpg"; //--> </script> </head> <body> <img width="720" height="540" src="bbb.jpg"> </img> </body> </html>
関連するQ&A
- 数カ所のフォームボタンに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等を一括指定できれば非常に便利なのですが、これを実現する方法はないものでしょうか。
- ベストアンサー
- HTML
- phpのwhile出力に対するJSを使った計算
JS初心者です。phpでmysqlからデータを取り出し、whileでテーブルに商品名等と単価・数・小計を出力していますが、各項目の数字を変更しphpで再計算させると当然ながらリロードが発生するのでテーブルの頭に戻って表示されてしまいます。この点を改善しなければならず、計算自体は単純なものですので、JSかAjaxでと思ったのですが、いずれの方法でも最初の一行しか動作いたしません。各エレメントの「id='x'」を「id='x<?=[renban]?>'」とすると横取りソフト上では「id=x3752」のように各行個別に番号が割り当てられているのですが、結果は同じで、JSには関係がないようにも見えます。下記ではwhileの中にJSが入っていますが、<SCRIPT TYPE="text/javascript"> <!-- // --> </SCRIPT> としてヘッダに置くと全く反応せず、ブラウザのエラー表示では「オブジェクトを指定して下さい」と出ます。大変困ってしまいました。どなたかご教授いただけますよう、よろしくお願いいたします。 以下見ずらいとは思いますが、実際のコードの抜粋です。問題はフォーム中ほどの部分です。 //ここまでDBからのデータ呼び出し部分 以下本題です while($row = mysql_fetch_array($result)){ PRINT<<<EOF <form action= "mv6.php" name="form1" method="POST" id="form1"> </tr><tr bgcolor="FFFFFF" onMouseOver="this.style.backgroundColor='#FFCCFF'" onMouseOut="this.style.backgroundColor='#FFFFFF'" > <td width="20"> <INPUT type='hidden' name='renban' value='$row[renban]'> <INPUT type='hidden' name="kind[$row[renban]]" value="ok"> <input type="checkbox" name="del[$row[renban]]" value="ok"></td> <td width="220"> <INPUT size='26' type='text' name='shu[$row[renban]]' value='$row[shu]'class = 'nonbor' onFocus="this.style.backgroundColor='#FFFF99'" onBlur="this.style.backgroundColor='ffffff'" ></td> <td width="300" ><INPUT size='36' type='text' name='hin_na[$row[renban]]' value='$row[hin_na]' id = 'hin_na[$row[renban]]' class = 'nonbor' onFocus="this.style.backgroundColor='#FFFF99'" onBlur="this.style.backgroundColor='ffffff'"></td> <SCRIPT> function cal(){ x = document.getElementById('x').value; y = document.getElementById('y').value; z = x * y; document.getElementById('z').value = z; } </SCRIPT> <td width="90" ><INPUT size='12' type='text' name='x' value='$row[tanka]' id='x' class = 'nonborri' onKeyup="cal(this);" onFocus="this.style.backgroundColor='#FFFF99'" onBlur="this.style.backgroundColor='ffffff'"></td> <td width="90"><INPUT size='12' type='text' name='y' value='$row[kazu]' id='y' class = 'nonborri' onKeyup="cal(this);" onFocus="this.style.backgroundColor='#FFFF99'" onBlur="this.style.backgroundColor='ffffff'"></td> <td width="100"><INPUT size='13' type='text' name='z' value='' id='z' class = 'nonborri' onFocus="this.style.backgroundColor='#FFFF99'" onBlur="this.style.backgroundColor='ffffff'"></td> <td width="240"><INPUT size='40' type='text' name='bikou[$row[renban]]' value='$row[bikou]' class = 'nonbor' onFocus="this.style.backgroundColor='#FFFF99'" onBlur="this.style.backgroundColor='ffffff'"> </td> </tr> </TABLE> EOF; }
- ベストアンサー
- JavaScript
- Mouseout後画像を戻したい
テーブルに背景画像（background)を使用しています。 その中にあるTDにリンクテキストを入れており、ここにマウスが重なったときに色を変えているのですが、 こんな感じ： <td onMouseover="this.style.backgroundColor='orange'" onMouseout ="this.style.backgroundColor='white'" bgcolor="ffffcc"> <a href="">テキスト</a> </td> Mouseoutした際に、画像差し替えとかTDの色を変えるのではなくて、元のテーブル背景画像が表示されるようにしたいのです。 実現できるようでしたら、回答お願いします…
- ベストアンサー
- Java
- onMouseoverを利用して、セル内の背景色と文字を反転させたい
テーブルで各セルに別ページへのリンクのリストを作成しています。 onMouseover と onMouseout でマウスが上に来た時に色を変えるようにしたいのですが、背景色の変更は出来ます。 onMouseover="this.style.backgroundColor='#3a5b88'" のようにして。 問題は文字色でして、こちらの変え方が分かりません。スタイルシートでも設定しているので、文字の上にポインタが来ればスタイルシートの指定通りに色を変えられますが、タイトルにも書いたように、onMouseover時には背景色と文字色を反転させるように考えているので、セル内の文字から離れた位置にポインタが来た時には背景色が文字色に変わる（つまり文字色はそのままなので同じ色になる）ので、文字が消えてしまうのです。 なにか良い方法がありましたら教えてください。
- ベストアンサー
- 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」等をまとめる方法があれば教えてください。 ■---元----------------------■ <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
- selectでinputの表示を変えたい
セレクトを選択した時に、inputの一部をdisabledにし、同時にinputの背景色を変更したいと思っています。 ----------------------------------------------------------------------- 現在はこんな感じです。 function menuLink(linkLoc) { if(linkLoc !="") { ifrm.location.href=linkLoc;} } --- セレクト１ <SELECT style="WIDTH: 130px" onchange="menuLink(this.options[this.selectedIndex].value)"> <OPTION value="11.html">1</OPTION> <OPTION value="22.html">2</OPTION> <OPTION value="33.html">3</OPTION> セレクト２ <SELECT style="WIDTH: 130px" onchange="menuLink(this.options[this.selectedIndex].value)"> <OPTION value="44.html">1</OPTION> <OPTION value="55.html">2</OPTION> <OPTION value="66.html">3</OPTION> セレクト３ <SELECT style="WIDTH: 130px" onchange="menuLink(this.options[this.selectedIndex].value)"> <OPTION value="77.html">1</OPTION> <OPTION value="88.html">2</OPTION> <OPTION value="99.html">3</OPTION> (実際にはもっと多くのセレクトがあります) <TR> <TD><INPUT type="text" name="aa" size="10" maxlength="2"></TD> <TD><INPUT type="text" name="ba" size="10" maxlength="2"></TD> <TD><INPUT type="text" name="ca" size="10" maxlength="2"></TD></TR> <TR> <TD><INPUT type="text" name="ab" size="10" maxlength="2"></TD> <TD><INPUT type="text" name="bb" size="10" maxlength="2"></TD> <TD><INPUT type="text" name="cb" size="10" maxlength="2"></TD></TR> <TR> <TD><INPUT type="text" name="ac" size="10" maxlength="2"></TD> <TD><INPUT type="text" name="bc" size="10" maxlength="2"></TD> <TD><INPUT type="text" name="cc" size="10" maxlength="2" /></TD></TR> <TR> <TD><INPUT type="text" name=da readOnly value=0 size=10></TD> <TD><INPUT type="text" name=ea readOnly value=0 size=10></TD> <TD><INPUT type="text" name=fa readOnly value=0 size=10></TD></TR> <TR> <TD><INPUT type="text" name=db readOnly value=0 size=10></TD> <TD><INPUT type="text" name=eb readOnly value=0 size=10></TD> <TD><INPUT type="text" name=fb readOnly value=0 size=10></TD></TR> <TR> <TD><INPUT type="text" name=dc readOnly value=0 size=10></TD> <TD><INPUT type="text" name=ec readOnly value=0 size=10></TD> <TD><INPUT type="text" name=fc readOnly value=0 size=10></TD></TR> ----------------------------------------------------------------------- セレクト１のどれかを選択した時に、インプットのaa,ba,da,eaをdisabledにし、同時にaa,ba,da,eaの背景色を変更 セレクト２のどれかを選択した時に、インプットのab,bb,db,ebをdisabledにし、同時にab,bb,db,ebの背景色を変更 という感じにしたいのですが、可能でしょうか？ 可能であれば書き方を教えていただけると助かります。 よろしくおねがいします。
- 締切済み
- JavaScript
- テーブルリンクに付いて
下記のテーブルリンクを作成しましたがクリックしても説明文が表示されません どなたか教えて下さい <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>
- ベストアンサー
- その他([技術者向] コンピューター)
- setTimeoutで引数を配列にできるか
画面全体に50行×50列くらいのtd（背景色がピンク）を持ったtableを配置し、それぞれのtdにマウスが乗ったらそのtdの背景色を青くして、マウスがtdの外に出たら1秒後にピンク色に戻すものを作ろうと思ってます。つまり、tdを画素に見立てた簡単なペイントに似たものを作ろうということです。 そのために以下のjavascriptを書きました。 window.onload = function(){ td = document.getElementsByTagName("td"); for(i=0;i<td.length;i++){ td[i].onmouseover = ChCo; td[i].onmouseout = setTimeout("ClCo('"+td[i]+"')",1000); } function ChCo(){ this.style.backgroundColor = "blue"; } function ClCo(hoge){ hoge.style.backgroundColor = "pink"; } } この場合、onmouseoverの青くするところはうまくいくのですが、onmouseoutのsetTimeoutのところがうまくいきません。どうも、setTimeoutに設定したClCoの引数がうまく渡ってないような感じなのですが、どこが間違っているのでしょうか。
- ベストアンサー
- 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