webサイトで文字にマウスを重ねた時に文章を表示させたい

2023/08/08 20:33

このQ&Aのポイント

ウェブサイトでJavaScriptを使用し、マウスを重ねた文字に対応する文章を表示させる方法について解説します。
記述したソースコードはInternet Explorerでは正しく動作しますが、Firefoxなど他のブラウザでは表示されません。他のブラウザでも正しく動作させるための修正方法をご説明します。
JavaScript初心者の方でも理解しやすいよう、修正すべき箇所とコードの解説を詳しく行います。

ベストアンサー

webサイトで文字にマウスを重ねた時に文章を表示させたい

2009/08/05 18:06

ウェブサイトで、JavaScriptを使用し、「挨拶」の文字にマウスを重ねた時、「こんばんは。」と表示されるようにしたいのですが、上手くいきません。下記は私が記述したソースになります。ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー <html> <head> <title>テスト</title> <script language="JavaScript">  </script> </head> <body ONLOAD="preloadImages();">  <div id="link2" style="position:absolute; width:600px; height:80px; z- index:1; left: 80px; top: 600px; visibility: hidden"> こんばんは。</div>  <a href="http://www.geocities.co.jp/Milkyway/1958/" onMouseOver="Lay_View('link2','visible');Lay_View('linka','hidden');" onMouseOut="Lay_View('link2','hidden');Lay_View('linka','visible');" > 挨拶</a> </body> </html> ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーこの場合IEでは、ちゃんと表示されるのですが、Firefox等で見た場合、何も表示されません。どうすれば、他のwebブラウザにも対応できるのでしょうか？ JavaScriptは初心者なので、修正すべき場所とコードを詳しく教えて頂けると助かります。よろしくお願い致します。

tyo-mo
お礼率11% (1/9)

JavaScript
回答数1
ありがとう数1

みんなの回答 （1）
専門家の回答

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

ベストアンサー

babu_baboo
ベストアンサー率51% (268/525)

2009/08/05 18:57 回答No.1

ごめん。れきしは、にがてなんだよね。 function Lay_View (id, sw) { 　document.getElementById(id).style.visibility = sw; } もうこれだけでいいんじゃない？ document.allとかdocument.layersとか、かこのいさん。こんなさんぷるきえればいいのに・・・。

質問者

お礼 2009/08/05 21:23

ありがとうございました。かなり助かりました。

関連するQ&A

初期画像にレイヤーが出てしまう
ＨＰにレイヤー設定をしたところ、画像を開けるとすぐレイヤーが出てしまいます。しかし、その画像でマウスを重ねたり外したりすれば、問題なく作動します。その後、ＨＰを開けると、また最初だけレイヤーが表示されてしまいます。どのようにしたら、最初の画面で表示されないようになるでしょうか？よろしくお願い致します。次のように設定しています。 <script language="JavaScript">  </script> <div id="ABC" style="position:absolute; width:350px; height:30px; z-index:1; left: 80px; top: 210px">あいうえお</div> <a href="index1.html"onMouseOver="Lay_View('ABC','visible');"onMouseOut="Lay_View('ABC','hidden');">AIUEO</a> これだけです。何か足りないでしょうか？
- ベストアンサー
- JavaScript
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
マウスオンで説明文をページの真ん中に表示させたい！
よろしくお願いします。 http://www4.ocn.ne.jp/~tomotan/tagpractice.html （↑）このサイトで <HTML> <HEAD> <SCRIPT></SCRIPT> <STYLE></STYLE> </HEAD> <BODY> <A HREF="#" onMouseover="show('myLayer1')" onMouseout="hide('myLayer1')">ここにマウス</A> <DIV ID="myLayer1" CLASS="myStyle"> Hello!! </DIV> </BODY> </HTML> を表示させると、「Hello!」の文字が「テキスト」の右側に表示されます。そうじゃなくて、「Hello!」の右側にリンクを箇条書きに書き込んでいきたいんです。で、リンクにマウスを乗せると左側にリンク先の説明が表示される・・・というふうにしたいんです。お願いしますｍ（＿＿）ｍ
- ベストアンサー
- JavaScript
onMouseOverの適応範囲
困ってしまい質問させていただきます。 <div> 　<a href="t1.html" onMouseOver="javascript:document.all('id1').style.visibility='visible';" onMouseOut="javascript:document.all('id1').style.visibility='hidden';">show</a> </div> <div id="id1" onMouseOver="javascript:document.all('id1').style.visibility='visible';" onMouseOut="javascript:document.all('id1').style.visibility='hidden';"> 　<a href="image.gif" onMouseOver="javascript:document.writeln(document.all('id1').style.visibility)">イメージ</a> </div> 以上のhtmlでは、「イメージ」にマウスを持っていくと、hiddenと表示されてしまいます。一度も<div id="id1"></div>から離れていないため、visibleと表示されると思っているのですが、<div></div>の中であっても、onmouseOutが実行されてしまうのでしょうか？ブラウザはIEを利用しています。どうか宜しくお願いします。
- ベストアンサー
- JavaScript
NN7.0でレイヤーの表示・非表示
レイヤーの表示・非表示のスクリプトなんですが、 function OpenLayer() { //NNの場合 if(document.layers) { document.content_menu.visibility="visible"; } //IEの場合 else { content_menu.style.visibility="visible"; } } function CloseLayer() { //NNの場合 if(document.layers) { document.content_menu.visibility="hidden"; } //IEの場合 else { content_menu.style.visibility="hidden"; } } に書きました。 IE6.0では動作しますがNN7.0では何も起こりません。どなたかどのように表記をすればいいのか教えてください。よろしくお願いします。
- ベストアンサー
- JavaScript
popupウィンドウでborderがcollapseなテーブル利用の問題
popupウィンドウにテーブルを使用していて、 border-collapse: collapse　のボーダーがある場合に、初期表示時点で、そのボーダーのみが表示されてしまいます。 firefox,operaでは起きずIE6で起きます。そこで非表示にするためのjavascript をonloadで動かしているのですが、データ量の大きいページだと、表示された後に消えるのが見えてしまい不細工です。最初から枠が表示されないようなcssの指定方法はないでしょうか。 <html> <head> <script>  </script> <style>  </style> </head> <body onload="PopupOff('poplink')" > <div id="poplink"> <table width="80px" height="80px"> <tr><td> [<a onClick="PopupOff('poplink')">閉じる</a>]<br /> ポップアップ </td></tr></table> </div> <a href="#" onClick="PopupOn('poplink')">リンク</a><br /> </body> </html>
- ベストアンサー
- HTML
リンク文字にマウスを乗せると画像を表示したい。
はじめまして。初心者でわからないので，質問します。よろしくお願いします。 JavaScriptで，リンク文字にマウスを乗せたときに，空いているスペースに画像をフェードイン・フェードアウトして表示したいと考えています。リンクが一つの場合はできたのですが，これが複数のリンクが合ったときには，どのようにすればよろしいでのしょうか？ <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <link href="test.css" rel="stylesheet" type="text/css"> <title>What's New!</title> </head> <body> <script language="JavaScript"> } // --></script> <IMG SRC="AAA.jpg" ID="myIMG" STYLE="filter:revealTrans(duration=3.0,Transition=12);visibility=hidden;" width="420" height="240" style="position:absolute; top:100px; left:350px;"> <div class="menu">■<a href="####" onMouseOver="fadein('myIMG')">フェード１</a></div> </body> </html>
- ベストアンサー
- JavaScript
IE6ではjavascriptが動くのにNN7.1では動かない。
”コンピューター家庭向け”のところでも質問したのですが、回答がないのでここで質問させていただきます。 HTML部分 <div class="galico"> <script language="javascript" src="poser.js"></script> <a href="javascript:showgallery()"> <img src="../base/gallery.gif" alt=""> </a> </div> SSC部分 .galico { z-index: 3; position: relative; top: 29px; left: -200px; } javascript部分 function showgallery(){ if ( document.all )document.all('gallery').style.visibility ='visible' else if ( document.layers )document.layers['gallery'].visibility ='show' else if ( document.getElementById )document.getElementById('gallery').style.visibility ='visible' } この記述で、IE6では思った通りに動いてくれます。（"../base/gallery.gif"をクリックするとjavascriptを実行してくれる。）ところが、NN7.1では "../base/gallery.gif" に触れても、ステータスバーにjavascriptにリンクするように表示もされないし、クリックしても動きません。なぜかSSCの "position: relative;" を "position: absolute;" にしてやると動くのですが。。。なぜでしょうか。わかりやすく教えていただけないでしょうか。
- ベストアンサー
- JavaScript
javascriptが効かない・・・
上下のチェックボックス（全チェック）をした後にリンクAのチェックをはずすとリンクBがチェックされている状態になります。そのときメニューがリンクBがリンクされている状態にしたいのですがうまくいきません。よろしくお願いいたします。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift-jis" /> <script type="text/javascript"> function pulldown(flg){ if(flg==0){ addInfoLink.style.visibility="visible"; }else{ updateInfo.style.visibility="visible"; } } function check(){ var cnt = 0; addInfoLink.style.visibility="hidden"; updateInfo.style.visibility="hidden"; for(i=0; i<document.forms[0].check1.length; i++){ if(document.forms[0].check1[i].checked == true){ cnt++; if(document.forms[0].check1[i].value==0){ alert("●"); muneHikasei.style.visibility="hidden"; linkB.style.visibility="visible"; return; }else if(document.forms[0].check1[i].value==1){ alert("▲"); muneHikasei.style.visibility="hidden"; linkA.style.visibility="visible"; return; } } } if(cnt==0){ linkB.style.visibility="hidden"; linkA.style.visibility="hidden"; addInfoLink.style.visibility="hidden"; updateInfo.style.visibility="hidden"; muneHikasei.style.visibility="visible"; } } var allFlg=false; function allCheckAction(){ if(allFlg== false && document.forms[0].allCheck1.checked==true){ for(j=0; j<document.forms[0].check1.length; j++){ document.forms[0].check1[j].checked=true; } check(); allFlg=true; document.forms[0].allCheck2.checked=true; return; } if(allFlg== true && document.forms[0].allCheck1.checked==false){ for(j=0; j<document.forms[0].check1.length; j++){ document.forms[0].check1[j].checked=false; } check(); allFlg=false; document.forms[0].allCheck2.checked=false; return; } if(allFlg== false && document.forms[0].allCheck2.checked==true){ for(j=0; j<document.forms[0].check1.length; j++){ document.forms[0].check1[j].checked=true; } check(); allFlg=true; document.forms[0].allCheck1.checked=true; return; } if(allFlg== true && document.forms[0].allCheck2.checked==false){ for(j=0; j<document.forms[0].check1.length; j++){ document.forms[0].check1[j].checked=false; } check(); allFlg=false; document.forms[0].allCheck1.checked=false; return; } } </script> </head> <body> <div id="muneHikasei" style="position:absolute; visibility:visible; left:9; top:28;">リンク</div> <div id="linkB" style="position:absolute; visibility:hidden; left:9; top:28;"> <a href="javaScript:void(0)" onclick="pulldown(0)">リンク</a> <div id="addInfoLink" style="position:absolute; visibility:hidden; left:4px top:16px; width:80; height:1px; background-color:#FFFFFF; layer-background-color:#FFFFFF"> リンクA<br /> <a href="">リンクB</a> </div> </div> <div id="linkA" style="position:absolute; visibility:hidden; left:9; top:28;"> <a href="javascript:void(0)" onclick="pulldown(1)">リンク</a> <div id="updateInfo" style="position:absolute; visibility:hidden; left:4px top:16px; width:80; height:1px; background-color:#FFFFFF; layer-background-color:#FFFFFF"> <a href="">リンクA</a><br /> リンクB </div> </div> <br><br><br><br><br> <form name="" method="post"> <input type="checkbox" name="allCheck1" value="1" onclick="allCheckAction()"/> <br> <input type="checkbox" name="check1" value="1" onclick="check()"/>リンクA <br> <input type="checkbox" name="check1" value="0" onclick="check()" />リンクB <br> <input type="checkbox" name="allCheck2" value="1" onclick="allCheckAction()"/> </form> </body> </html>
- ベストアンサー
- JavaScript
レイヤーのクリッピングを解除するにはどうすれば良いですか
難しい内容かもしれませんが、宜しくお願いします。 IE4 や NN4 で例えば以下の様に、 'lay'という名前のレイヤーを作成したとします。 <DIV ID='lay' STYLE='position:absolute'></DIV> すると以下の様に、JavaScriptから文字列 htm をレイヤーに書き込めます。 //IEの場合 document.all('lay').innerHTML=htm; //NNの場合 document.layers['lay'].document.open(); document.layers['lay'].document.write(htm); document.layers['lay'].document.close(); そしてレイヤーのサイズも文字列 htm の内容に合わせて変化します。しかし以下の様に、１度でもレイヤーをクリッピングした後に、 //IEの場合 document.all('lay').style.width=100; document.all('lay').style.height=100; document.all('lay').style.clip='rect(0,100,100,0)'; //NNの場合 document.layers['lay'].clip.left=0; document.layers['lay'].clip.right=100; document.layers['lay'].clip.bottom=100; document.layers['lay'].clip.top=0; このレイヤーをクリッピングする前の、文字列 htm の内容に合わせてサイズが変化していた頃の状態に、戻す方法が分からなくて困っております。やっぱり無理でしょうか。何の回答もないとサミシイので、わからなくても誰か返事してあげて下さい。
- ベストアンサー
- JavaScript