• 締切済み

JS onmouseoverについて

お世話になっております。 お忙しいところ申し訳ありません onmouseoverでテキストリンクから 画像を表示させているのですが onmouseで出た画像の場所に <select>で表示したセレクターがあり 画像が隠れてしまいます どちら様か画像を一番上に持ってくる 方法を教えていただけないでしょうか? 仕様 WIN XP IE SP2 NNで見ると表示されます。 文章が下手で申し訳ありません かいつまんだソースをのせます <!-- function msg() { document.all.aaa.innerHTML ='<table width=200 cellspacing=0 cellpadding=0 border=1><tr><td>bbb</td></tr></table>'; } //--> </script> <div id="aaa" STYLE="position:absolute;"></div> <a onmouseover="msg()" HREF="###">1111</a> <select name="ggg"> <option VALUE="" SELECTED>xxx</option> <option VALUE="">yyy</option> </select> です。 bbbを見えるようにしたいのです よろしくおねがいします

みんなの回答

  • m035
  • ベストアンサー率44% (38/86)
回答No.2

>positionで絶対位置を指定するしかないのでしょうか? <div id="aaa" style="position:relative;left:適切なpx値;"></div> のようにposition:relative;をstyleに指定することによって、 相対位置(参考URL参照)で座標を指定することが出来ます。 絶対値より柔軟な表示が出来ると思います。

参考URL:
http://www.htmq.com/style/position.shtml
itupyon
質問者

お礼

お礼送れてもうしわけありません。 ありがとうございました。

  • m035
  • ベストアンサー率44% (38/86)
回答No.1

<div id="aaa" style="position:relative;left:適切なpx値;"></div> で重ならない位置に表示するか、 <div id="aaa" style="position:absolute;z-index:2;"></div> <select name="ggg" style="z-index:1;"> とする。 z-indexについては参考URLを見てください。

参考URL:
http://www.htmq.com/style/z-index.shtml
itupyon
質問者

お礼

ありがとうございます。 早速試してみようと思います。

itupyon
質問者

補足

お忙しいところすいません。 z-indexは試してみてたのですが やはりできません。 となると positionで絶対位置を指定するしかないのでしょうか? 返答おくれましてすいませんです

関連するQ&A

  • 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> -------------------------------- CSSもJavaScript初心者ですので全く的外れな質問かもしれませんがよろしくお願いします。

  • 【タグ】左寄せする方法

    一部消去していますが、以下のようなフォームを左に任意のスペースを空けて表示させる場合、どういったタグを使えばいいのでしょうか。 よろしくお願いいたします。 <FORM ACTION="" METHOD="GET" NAME="TG" TARGET="_blank"><table width="250" border="0"><tr><td bgcolor="#0000FF"><div align="center"><font color="#FFFFFF"><strong>検索</strong></font></div></td></tr><tr><td>選びください。<br></br><select name="stayym" size="1"><option value="200902"></option></select></br><br>選びください。</br><select name="catid" size="1">n><option value="11203</option></option></select><input type="submit" value="GO"></td></tr><tr><td><div align="right">ツーリスト</div></td></tr></table></FORM>

    • ベストアンサー
    • HTML
  • option 選択による表示&非表示

    <select name="var"> <option value="1">見せる</option> <option value="2">見せない</option> </select> <!--内容--> <table> <tr></td>内容</td></tr> </table> option 「見せる」を選択した場合、テーブル全体が<tabel>~</table>が表示、 option 「見せない」を選択した場合、テーブル全体が<tabel>~</table>が表示されなようにしたいです。 ご教授よろしくお願いいたします。

  • JSでページ内の表示を変えた時の問題について

    どなたかお手すきでしたら、稚拙な質問にお付き合いお願い致します。 Javascriptを利用して、プルダウンメニューの選択肢を選んで ページ内の表示を変更したときの問題なのですが、 選択後submitボタンで次のページに移動しブラウザの戻るボタンで前ページに戻ると プルダウンメニューにはさきほど選択したものが残っているのですが、 変更したはずの表示部分が元に戻ってしまいます。 FireFoxで確認した場合、この症状はみられませんでした。 IEの仕様なのでしょうか? どなたか解決方法が分かりましたらご教授お願い致します。 【ソース】 <html> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Type" Content="text/Javascript"> <title>テスト</title> <script type="text/javascript"> <!-- //表示変更 function showthis(obj) { if(!obj) return false; if(document.getElementById) { for( i=0; i<=5; i++ ){ document.getElementById( "1_"+ i ).style.display = "none"; document.getElementById(obj).style.display = "block"; } } else { return false; } } --> </script> </head> <body> <form name="one" action="./two.html" method="POST"> <table class="box2"> <tr class="tr1"> <td class="pdown"> <select name="q1" onChange="showthis(this.value)"> <option value="1_0" selected>---- 選んでください ----</option> <option value="1_1"> 1 - いち</option> <option value="1_2"> 2 - に-</option> <option value="1_3"> 3 - さん</option> <option value="1_4"> 4 - よん</option> <option value="1_5"> 5 - ご</option> </select> </td> </tr> </table> <div id="youso"> <table class="box1"> <tr> <td> <div id="q1"> <div id="1_0"> <p>【---- 選んでください ----】</p> </div> <div id="1_1" style="display: none;"> <p>【1 - いち】</p> </div> <div id="1_2" style="display: none;"> <p>【2 - に-】</p> </div> <div id="1_3" style="display: none;"> <p>【3 - さん】</p> </div> <div id="1_4" style="display: none;"> <p>【4 - よん】</p> </div> <div id="1_5" style="display: none;"> <p>【5 - ご】</p> </div> </div> </td> </tr> </table> </div> <input type="submit" name="" value="次へ進む"> </form> </body> </html>

  • 同じものを繰り返し表示させる

    下記の(1)のような「1」~「3」まで選択可能なセレクトメニューにおいて、 「1」を選択すると(2)の部分を1つ、「2」を選択すると(2)の部分を2つ、「3」を選択すると(2)の部分を3つ、表示させるようにしたいと思っています。 (2)の部分を3つ書き、JavaScriptを使用して(1)のセレクトメニューで選択した数によって、 (2)の部分を1つ表示させたり、2つ表示させたり、3つ表示させたりすることはできました。 しかし、3つならまだよいのですが、5つ、6つ、それ以上となると、 (2)の部分を5つ、6つも同じことを書くのは面倒で、無駄が多いように思います。 (2)の部分を1つだけ書いた上で、(1)の選択した数の分だけ(2)を表示させる方法はないでしょうか。 よろしくお願いいたします。 (1)-------------------------------- <select name="id"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> ----------------------------------- (2)-------------------------------- <table> <tr> <td> <select name="number"> <option value="1000">1000</option> <option value="2000">2000</option> <option value="3000">3000</option> </select> </td> </tr> <tr> <td> <select name="name"> <option value="sato">sato</option> <option value="sakamoto">sakamoto</option> <option value="hanada">hamada</option> <option value="wakui">wakui</option> </select> </td> </tr> </table> -----------------------------------

    • ベストアンサー
    • HTML
  • セレクトボックスの内容を次のページで受け取る方法

    <form action="./check.asp" method="POST"> <table> <tr> <td> <select name="year"> <option value="2006" >2006</option> <option value="2007" >2007</option> <option value="2008" >2008</option> </select> </td> </tr> <tr> <td align="center"><input type="submit" value="確認する"></td> </tr> </table> </form> として 次のページで YEAR =Trim(request("year")) Response.Write YEAR で受け取り表示しようとしていますが取れません。なぜですか?教えてください

  • フォーム内の値のチェックについて

    このようなフォーム(aspでセレクトボックスの数は可変になります。)にてSubmit時に 同じ値が選ばれていたらalertを出すJavaScriptを作りたいのですが、 どのようなものを作ればよろしいでしょうか? <FORM name="TestForm" action="" method="POST" target=""> <TABLE border="1" cellspacing="0" cellpadding="0" width="100%"> <TR> <td>1位</td> <TD> <select name="Select1"> <OPTION value="449">[選択なし]</OPTION> <OPTION value="465">あ</OPTION> <OPTION value="466">い</OPTION> <OPTION value="467">う</OPTION> </select> <td>2位</td> <TD > <select name="Select1"> <OPTION value="449">[選択なし]</OPTION> <OPTION value="465">あ</OPTION> <OPTION value="466">い</OPTION> <OPTION value="467">う</OPTION> </select> <td>3位</td> <TD> <select name="Select1"> <OPTION value="449">[選択なし]</OPTION> <OPTION value="465">あ</OPTION> <OPTION value="466">い</OPTION> <OPTION value="467">う</OPTION> </select> </TR> </TABLE> <TR><TD> <INPUT type="submit" value=登録 name=B1 onClick=""> </TD></TR> </FORM>

  • プルダウンによる表示制御方法

    プルダウンの選択内容による表示の切り替えを行いたいです。 例えば、AとCを選択すると下にあるテキストボックスが非表示になり Bを選択するとテキストボックスが表示するように制御を行いたいです。 <table align="center" border="0" cellpadding="0" cellspacing="0"> <tr><td> <form name="a"> <SELECT NAME="b"> <OPTION SELECTED> <OPTION VALUE="0">A <OPTION VALUE="1">B <OPTION VALUE="2">C </SELECT> </td></tr> <tr><td> <input type="text" size="6" maxlength="5" name="text1" value=""> </td></tr> </form> </table></form></td></tr></table> すみませんが、よろしくお願い致します。

    • ベストアンサー
    • HTML
  • <SELECT>タグの折り返し

    テーブルで横幅100で囲った枠の中に、<select>タグを表示しています。 このとき、optionで表示する項目が長いと、テーブルの横幅が伸びてしまいます。 テーブルの横幅が伸びないようにする方法はないでしょうか? できれば、optionの項目を折り返し表示するとか、プルダウンしたときだけテーブルを突き抜けて表示するとかできれば良いのですが。 たとえば、こんな感じです。 <table border="1" width="100"> <tr>  <td>   <select name="test">    <option value="d1">1234567890123456789012345678901234567890</option>    <option value="d2">1234567890123456789012345678901234567890</option>    <option value="d3">1234567890123456789012345678901234567890</option>   </select>  </td> </tr> </table> 宜しくお願いします。

    • ベストアンサー
    • HTML
  • JavaScriptのSELECTの値について

    JavaScriptについて、質問させてください。 html1からhtml2にSELECTで選択した値を渡すプログラムを作成しています。 下はそのソースです。 <html> <head></head> <body> <form method="POST" action="html2" onSubmit="入力チェック"> <table> <tr> <td>項目A-1</td> <td>項目A-2</td> <td> <select name="selname1"> <option value="0">0</option> <option value="1,11,111">1</option> <option value="2,22,222">2</option> </select> </td> </tr> <tr> <td>項目B-1</td> <td>項目B-2</td> <td> <select name="selname2"> <option value="0">0</option> <option value="3,33,333">3</option> <option value="4,44,444">4</option> </select> </td> </tr> </table> </form> </body> </html> 項目は全部で10ほどあるので、途中省略しています。 SELECTで0以外が選ばれていた場合に、それに関連する項目情報と optionのvalueをhtml2に送信させて、一覧表のように表示させたいと思います。 JavaScriptのDOMやループ文を使うようですが、 私は専門外なので、どのような処理を組めばよいかわかりません。 どなたか、わかる方ご教示願います。

専門家に質問してみよう