• 締切済み

『オンマウスで説明文を表示』について

http://lll.s21.xrea.com/m/link/38.html こちらのURLのタグを参考にしてやってみたところ、背景が半透明になってしまうのです。 すぐ上やすぐ下に文字が書いてあるので、ごちゃごちゃになって見えなくなってしまいます。 色々いじってみましたが、どうも上手くいきません。 どなたか、何処をどう変更するのか教えて頂けませんか？ お願いします。 使用タグ↓ <SCRIPT language="JavaScript"> <!-- function up(text){ document.getElementById('te').innerHTML=text; set.style.posLeft =document.body.scrollLeft+window.event.clientX+10; set.style.posTop =document.body.scrollTop+window.event.clientY+10; document.all('set').style.display="block";} function kes(){document.all('set').style.display="none";} //--> </SCRIPT> <A HREF="○○.html" onmouseover="up('文章...')"; onMouseout="kes()">テストページ</A> <DIV style="display:none;position:absolute;filter:Alpha(opacity=70);" ID="set"> <TABLE BORDER=1 style="border-style:dotted" BORDERCOLOR="#333333" BGCOLOR="#E0E0E0" cellspacing=1 cellpadding=20> <TR><TD BGCOLOR="#FFE0E0"><SPAN ID="te"></SPAN></TD></TR> </TABLE> </DIV>

みんなの回答

  • 15mm
  • ベストアンサー率65% (65/100)
回答No.3

ソース見てみました。 一番気になるのは<link>の"style7.css"なんですが・・・ とりあえずそこは気にせずに（そこのスタイル指定が無いものとして）話をすると、 ・ページの背景が白、説明文の部分の背景も白で、透明に見えるだけかもしれません。 特に説明文の背景色は、<table>、<td>の２箇所で指定されているので、 １箇所だけ変更しても変化が無かったので、透明に見えたのかもしれません。 ・ブラウザには、ユーザ独自のスタイルシートをつけることができる機能があるので、 そちらが優先されて透明度指定が入っているかもしれません。 ・ブラウザがソースを誤解釈し、表示崩れが起きているかもしれません。 ２９行目からソースがおかしくなっています。 onMouseOut="this .src='img/enter2.png'"></></a><br> </td></tr> </>が不要＆テーブルは始まっていないので</td>と</tr>は不要 ぐらいの可能性を考えてみました。 ＩＥ７・Ｏｐｅｒａで透明ではないことを確認してます。 （ＦｉｒｅＦｏｘはfilterに対応して無いので参考外）

  • 15mm
  • ベストアンサー率65% (65/100)
回答No.2

＞それは私も試したのですが…背景が透明のままなんです； ＩＥ７で確認済みなんですけどねぇ・・・ 色が透明っぽく見えてるだけなのか <div id="set">よりも上のレイヤーに他の物を作っているのか 他の場所で（<style>タグ・外部ＣＳＳファイル）filter指定してしまっているのか 変更する場所・保存先を間違えているのか あなたの目が透視しているのか（何 とりあえず filter:Alpha(opacity=100) !important; としてみてください。これで改善されればどこか別の場所で指定されていたのだと思います。 全体のソースが分かれば何とかなるかもしれません。

tuki-sora
質問者

補足

やってみましたが…やはり改善はされません； 全体のソースはこちらです。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta name="robots" content="noindex,nofollow"> <link href="style7.css" rel="stylesheet" type="text/css"> <title> タイトル</title> <SCRIPT language="JavaScript"> <!-- function up(text){ document.getElementById('te').innerHTML=text; set.style.posLeft =document.body.scrollLeft+window.event.clientX+10; set.style.posTop =document.body.scrollTop+window.event.clientY+10; document.all('set').style.display="block";} function kes(){document.all('set').style.display="none";} //--> </SCRIPT> </head> <body> <br><br> <div id="h3"><img src="img/tit-4.gif"></div><div id="box"></div> <div id="text"> 内容<br> <a href="javascript:window.external.AddFavorite('URL','タイトル')" onmouseover="up('ブックマークする場所は自由です。<br>※　サイトデザイン変更などで<br>此処以外のURLが変わる事があります。<br>«Click here.»')"; onMouseout="kes()">ブックマークについて</a><br><br> <br><br><br><br><br>内容2<br> <a href="m-welcome.html" title="説明" class="img" target="_top"><img src="img/enter2.png" onMouseOver="this .src='img/enter3.png'" onMouseOut="this .src='img/enter2.png'"></></a><br> </td></tr> </div> <DIV style="display:none;position:absolute;filter:Alpha(opacity=100) !important;" ID="set"><TABLE border="0" style="border-style:dashed;border-width : 1px 1px;" BORDERCOLOR="#333333" BGCOLOR="#ffffff" cellspacing="1" cellpadding="20"> <TR><TD BGCOLOR="#ffffff"><SPAN ID="te"></SPAN></TD></TR> </TABLE> </DIV> </body> </html>

  • 15mm
  • ベストアンサー率65% (65/100)
回答No.1

＞背景が半透明になってしまうのです ＣＳＳです。 <DIV style="display:none;position:absolute;filter:Alpha(opacity=70);" ID="set"> filter:Alpha(opacity=70)　が、透明度指定です。 単に透明感をなくしたいのであれば、 <DIV style="display:none;position:absolute;" ID="set"> でＯＫです。

tuki-sora
質問者

補足

それは私も試したのですが…背景が透明のままなんです；

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

関連するQ&A

  • IEではうまく行くのですが他のブラウザでも表示できるように…

    下記のようにしたのですが、IEではうまくゆくのですが、 他のブラウザではできません。 同じようにするにはどのように調整したらよいのか教えてください。 <DIV> <SPAN style="overflow:hidden;width:30px"> <TABLE border="1" width="100%"> <TR bgcolor="silver"><TD>A</TD></TR> </TABLE> </SPAN> <SPAN id="title" style="overflow-y:scroll;overflow-x:hidden;width:150px;"> <TABLE border="1" style="table-layout:fixed;width:150px"> <TR bgcolor="silver"><TD>C</TD><TD>D</TD><TD>E</TD></TR> </TABLE> </SPAN> </DIV> <!--本体部分--> <DIV> <SPAN id="fixedcols" style="overflow:hidden;overflow-x:scroll;width:30px;height:80px;"> <TABLE border="1" style="width:100%" bgcolor="#ffffcc"> <TR><TD>F</TD></TR> <TR><TD>K</TD></TR> <TR><TD>P</TD></TR> <TR><TD>U</TD></TR> </TABLE> </SPAN> <SPAN id="maincols" style="overflow:scroll;width:150px;height:80px" onscroll="fnc_scroll()"> <TABLE border="1" style="table-layout:fixed;width:150px"> <TR><TD>H</TD><TD>I</TD><TD>J</TD></TR> <TR><TD>M</TD><TD>N</TD><TD>O</TD></TR> <TR><TD>R</TD><TD>S</TD><TD>T</TD></TR> <TR><TD>W</TD><TD>X</TD><TD>Y</TD></TR> </TABLE> </SPAN> </DIV> <SCRIPT language="javascript"> <!-- function fnc_scroll(){ document.all.item('fixedcols').scrollTop=document.all.item('maincols').scrollTop; document.all.item('title').scrollLeft=document.all.item('maincols').scrollLeft; } --> </SCRIPT>

  • Javascript　web テーブルにカーソルを載せると、説明文を表示するプログラム

    タイトルの通りのプログラムを作ったのですが、ファイルを開いた時から説明文が表示されてしまいます。開いた時に表示されなくするには、どのようにすればよいのでしょうか？ ソースは↓になります。よろしくお願いいたします。 <html> <head> <script type="text/javascript"> <!-- function display_INIT() { document.getElementById('discript01').style.display='none'; } function display_ON(itm) { if(itm == 1) { document.getElementById('discript01').style.display='block'; } } function display_OFF(itm) { if(itm == 1) { document.getElementById('discript01').style.display='none'; } } // --> </script> </head> <table> <tr onmouseover="display_ON(1)" onmouseout="display_OFF(1)"> <td width="16%" align="center" bgcolor="EBEBEB" nowrap>test </td> <td width="16%" align="center" bgcolor="#EBEBEB"> <input type="radio"> </td> <td width="17%" align="center" bgcolor="#EBEBEB"> <input type="radio"> </td> <td width="17%" align="center" bgcolor="#EBEBEB"> <input type="radio"> </td> <td width="17%" align="center" bgcolor="#EBEBEB"> <input type="radio"> </td> <td width="17%" align="center" bgcolor="#EBEBEB"> <input type="radio"> </td> </tr> <tr id="discript01"> <td colspan="6">（只今テスト中） </td> </tr> </table> </html>

  • テキストボックスの表示

    テキストボックスの表示 テキストボックスを２つ横に並べて表示したいのですが、 <html> <div style="border:thick solid;width:200;height:200;overflow:auto;"> <Table border="0" width="308" height="300" cellspacing="0" bgcolor="#ffffff"> <Tr><Td align="center" valign="top"> テキストＡ </Td></Tr> </Table></div> <div style="border:thick solid;width:200;height:200;overflow:auto;"> <Table border="0" width="200" height="200" cellspacing="0" bgcolor="#ffffff"> <Tr><Td align="center" valign="top"> テキストＢ </Td></Tr> </Table></div> </html> これで、記述をすると縦に二つ表示されます。 スタイルシートを使用しないと無理でしょうか？

    • ベストアンサー
    • HTML
  • オンマウスでプルダウンメニューを作りたいのですが？

    オンマウスでプルダウンメニューを作りたいのですが、作って見た所表示はしますが、消えません。 それと、横に同様なメニューを作る場合の方法を申し訳ありませんが教えてください 　以下がソースです。 <HTML> <HEAD> <TITLE>メニュー</TITLE> </HEAD> <BODY> <A href="#" onMouseover="window['table'].style.display='none'" onMouseout="window['table'].style.display=''"> ●●情報</A> <TABLE id="table" border="1" style="display:" align="left" cellpadding="0" cellspacing="0" width="180"> <TR> <TD CLASS="td9" COLSPAN="3" ALIGN="left"><a href="http://www.goo.ne.jp"></a>●●</TD> </TR> <TR> <TD CLASS="td9" COLSPAN="3" ALIGN="left">▲▲</TD> </TR> </TABLE> </BODY> </HTML>

  • ラジオボタンではなくセレクトボックスで表の表示切換

    セレクトボックスで表の表示非表示を選択できるようにしたいです。最初は非表示で。jsで。 以下はその分です。 どこを変えたらいいですか。 <script type="text/javascript"> function Click_idbbb() { 　　if (document.all.idbbb.checked==true) { 　　　　document.all.bbb.style.display = "block" 　　} else { 　　　　document.all.bbb.style.display = "none" 　　} } function Click_idccc() { 　　if (document.all.idccc.checked==true) { 　　　　document.all.ccc.style.display = "block" 　　} else { 　　　　document.all.ccc.style.display = "none" document.getElementById('lng').innerHTML=tmp2; document.getElementById('table').innerHTML=tmp3; } </script> <div> <p> <input id ="idbbb" type="checkbox" name="kakikukeko"onclick="Click_idbbb()">かきくけこ <input id ="idccc" type="checkbox" name="sashisuseso"onclick="Click_idccc()">さしすせそ </p> <div id="bbb" style="display:none;"> 　<table border="1" cellspacing="2" cellpadding="0"> 　　<tr><td>テーブル２<p></p></td></tr> 　</table> </div> <div id="ccc" style="display:none;"> 　<table border="1" cellspacing="2" cellpadding="0"> 　　<tr><td>テーブル３<p></p></td></tr> 　</table> </div>

  • オンマウスでボックス表示を中央に表示

    この下のスクリプトで画像にカーソルがオンマウスになるとその下に ボックスが表示されるという構造なのですが、色々試したのですが、 ブラウザの解像度、１２８０、１０２８、８００などでもこのオンマウスで表示されるボックスが中央にくるようにしたいのです。 レイアウトを統一するためです。 function up(text){ document.getElementById('te').innerHTML=text; set.style.posLeft =document.body.clientWidth/4; set.style.posTop =document.body.clientHeight; document.all('set').style.display="block";} function kes(){document.all('set').style.display="none";} という構文なのですが、この上のものですと１０２８では中央にくるのですが、自宅のワイドモニターですとずれてしまいます。 となたか、どんなモニターでもどんな解像度でもこのボックスをいつも中央に表示をするスクリプトを教えていただけないでしょうか。。。 自分でも勉強しているのですが、なかなか上手くいかなく困っています。どうか宜しくお願いいたします。

  • Netscape4でスタイルシートを設定すると、スクリプトが動作しません。

    お世話になっています。 現在、スタイルシートのvisibility属性を利用してリンクをクリックすると、見えなかったテーブルを表示させる、というサンプルを作っています。 しかし、テーブル内にスタイルシートの設定を入れた途端、Netscape4のみ動作しなくなりました。（「#この部分が～」のところです） 原因が分かれば、教えていただきたいと思います。 ソースは次の通りです。 function hyoji(lay){ if(document.getElementById) { document.getElementById(lay).style.visibility = 'visible'; } else if(document.all) { document.all(lay).style.visibility = 'visible'; } else if(document.layers) { document.layers[lay].visibility = 'show'; } } <A HREF="javascript:hyoji('test0')">ZERO</a>　 <A HREF="javascript:hyoji('test1')">ONE</a> <A HREF="javascript:hyoji('test2')">TWO</a> <div id = "test0" style="position:absolute; top:100px; left:100px ;visibility:hidden"> <table border=3> <tr> <td bgcolor=teal>ZERO</td> </tr></table></div> <div id = "test1" style="position:absolute; top:200px; left:100px ;visibility : hidden"> <table border=3> <tr><td bgcolor=hotpink> #この部分が問題？ <span style="line-height:120%">ONE</font></td> </tr></table></div> <div id = "test2" style="position:absolute; top:150px; left:100px; visibility : hidden"> <table border=3> <tr><td bgcolor=hotpink>TWO</td></tr> </table> </div>

  • 初期状態でテーブルの非表示

    JavaScript初心者です。 チェックボックスをチェックされたときだけ テーブルを表示させるようにしたいのです。 いろいろ調べながらようやく出来たのですが、 最初にテーブルを非表示にしたいのに出来ません。 style="display:none"を指定すると非表示になるのではないのでしょうか？なにが間違っているのでしょうか？他の記述があるのでしょうか？ function Click_idaaa() { 　　if (document.all.idaaa.checked==true) { 　　　　document.all.aaa.style.display = "block" 　　} else { 　　　　document.all.aaa.style.display = "none" 　　} } function Click_idbbb() { 　　if (document.all.idbbb.checked==true) { 　　　　document.all.bbb.style.display = "block" 　　} else { 　　　　document.all.bbb.style.display = "none" 　　} } <body> <div> <p><input id ="idaaa" type="checkbox" name="aiueo" 　　onclick="Click_idaaa()">あいうえお <input id ="idbbb" type="checkbox" name="kakikukeko"onclick="Click_idbbb()">かきくけこ</p> </div> <div id="aaa" style="display:none:"> 　<table border="1" class="input"> 　　<tr><th><font size="-1">■テーブル１</font></th><td> 　　<input type="text" name="textfieldName" size="24"></td></tr> 　</table> </div> <div id="bbb" style="display:none:"> 　<table border="1" cellspacing="2" cellpadding="0"> 　　<tr><td>テーブル２<p></p></td></tr> 　</table> </div> </body> 上記で行き詰ってしまい他の方法でと思い、 <body onload="Click_idaaa():Click_idbbb()"> と指定して非表示にさせようとしても出来ませんでした。 複数指定は：ではないのでしょうか？ どの方法でもいいのでテーブル1と2を初期状態で非表示にしたいのです。

  • テーブル内のテーブルの高さを揃えたい。

    CGIの表示部分を改造中です。 下のソースをhtmlファイルにして見てもらったら判ると思うのですが、 <TABLE border="0"> <COL span="4" width="50"> <TR> <TD valign="top"> <TABLE border="0" cellpadding="0" cellspacing="1" bgcolor="#cccccc" height="100%"> <TR> <TD bgcolor="#ffffff">こんな風に</TD> </TR> </TABLE> </TD> <TD valign="top"> <TABLE border="0" cellpadding="0" cellspacing="1" bgcolor="#cccccc" height="100%"> <TR> <TD bgcolor="#ffffff">枠を置いたときに</TD> </TR> </TABLE> </TD> <TD valign="top"> <TABLE border="0" cellpadding="0" cellspacing="1" bgcolor="#cccccc" height="100%"> <TR> <TD bgcolor="#ffffff">100%のサイズ指定しても合わない高さを</TD> </TR> </TABLE> </TD> <TD valign="top"> <TABLE border="0" cellpadding="0" cellspacing="1" bgcolor="#cccccc" height="100%"> <TR> <TD bgcolor="#ffffff">ちゃんと揃えて配置したい</TD> </TR> </TABLE> </TD> </TR> </TABLE> 高さを100%にしても広がりませんでした。 どうにかして高さ(下の位置)を揃えることは出来ないでしょうか?

    • ベストアンサー
    • HTML
  • JavaScriptでの表の行の表示・非表示の切り替え

    現状では、テスト1を選んだときだけテキストを出すことはできるのですが、どうしても2行表示するという事ができません。 テスト1を選択した時だけ2行表示し、テスト1以外を選択した時は非表示にするにはどうすればよいのでしょうか。 <html> <head> <title>テスト</title> <script type="text/javascript" language="JavaScript"> <!-- function showthis(sel) { var value = sel.options[sel.selectedIndex].value; if(value == "test1"){ if(document.getElementById){ if(document.getElementById(value).style.display == "block"){ document.getElementById(value).style.display = "none"; }else{ document.getElementById(value).style.display = "block"; } } } else if(value != "test1"){ if(document.getElementById){ document.getElementById("test1").style.display = "none"; } } } // --> </script> </head> <body> <table border="1" width="367"> <tr> <td width="134"> <form> <select onchange="showthis(this)"> <option selected="selected">選んでください</option> <option value="test1">テスト１</option> <option value="test2">テスト２</option> <option value="test3">テスト３</option> </select> </form> </td> <td width="217"> <p>テスト</p> </td> </tr> <tr> <td width="134"> <p>&nbsp;</p> </td> <td width="217"> <p>&nbsp;</p> </td> </tr> </table> <div id="test1" style="display:none;"> （本来はここに2行追加したい） </div> </body> </html>

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する