- 締切済み
javascriptがChromeで機能しません
ご質問させていただきます。 リンクにオンマウスするとカーソルのそばにバナーを表示させるjavascriptをHTMLに組み込みました。 IEでは正常に機能するのですが、Chromeではバナーがカーソルのそばではなくページの一番左上に表示されてしまいます。 どのようにソースを記述すれば改善されるのか、教えていただけないでしょうか。 javascriptに関しては初心者なので、困っております。 何卒宜しくお願い致します。 因みに、javascriptは http://lll.s21.xrea.com/m/link/38.html を参考にして書きました（ここでは、Chromeでオンマウスすると文章が一番右下に表れてしまいます）。 <html> <head> <script type="text/javascript"> <!-- function on(text) { document.getElementById('banner').innerHTML=text; frame.style.posLeft =document.body.scrollLeft+window.event.clientX+10; frame.style.posTop =document.body.scrollTop+window.event.clientY-10; document.all('frame').style.display="block"; } function off() { document.all('frame').style.display="none"; } // --> </script> <div style="border:1px solid #ddd; background:#fff; padding:5; display:none; position:absolute;" id="frame"><span id="banner"></span></div> </head> <body> <a href="サイトアドレス" target="_blank" onmouseover="on('<img src=\'バナーアドレス\'>')"; onmouseout="off()">サイト名</a> </body> </html>
- alt7
- お礼率0% (0/4)
- JavaScript
- 回答数3
- ありがとう数7
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- Ogre7077
- ベストアンサー率65% (170/258)
いくつかイケテない点を併せて修正 function on(text) { var ev = window.event; // TODO Mozilla 系へ対応。できれば addEventListener へ移行 var x = ev.pageX || ev.clientX + (document.documentElement || document.body).scrollLeft; var y = ev.pageY || ev.clientY + (document.documentElement || document.body).scrollTop; var frame = document.getElementById('frame'), banner = document.getElementById('banner'); banner.innerHTML = text; frame.style.left = (x + 10) + 'px'; frame.style.top = (y - 10) + 'px'; frame.style.display = 'block'; } 要素の位置がよろしくない <head><div id=frame> ... <body> ... 一般的には <head> ... <body><div id=frame> ...
関連するQ&A
- cssでdisplay:noneを指定した時のプルダウンメニュー
こんにちは、JavaScriptでプルダウンメニューを作ろうとして cssで予めdisplay:none;を指定したところ、 メニューがクリックしても開かなくなってしまいました。 html、css、JavaScriptの記述は以下の通りです。 html --------------------------------------- <span onclick="PullDown('term1')">クリック</span> <div id="term1"> <ul> <li>***********</li> <li>***********</li> </ul> </div> ----------------------------- css ------------------------------ div#term1 { display: none; } ------------------------------- JavaScript ------------------------------- function PullDown(id){ if(document.getElementById(id).style.display == 'none') document.getElementById(id).style.display=''; else document.getElementById(id).style.display='none'; } --------------------------------- cssの記述部分を無くすとちゃんと開いたり閉じたりと動作します。 また、 function Init(){ document.getElementById("term1").style.display="none"; } とJavaScriptで書いて、 bodyタグの所で <body onload="Init()">として呼び出してロード時に隠すようにするとちゃんと開閉してくれます。 cssでdisplay:none;と書くと動かなくなる理由と、 対策が分かる方居ましたら教えてください。
- ベストアンサー
- JavaScript
- javascriptでボックスの表示非表示
javascriptでボックスにマウスオーバーすると、同じ位置に別のボックスを表示させたいと考えています。 以下のようにしてみましたが、ie9ではできたのですが、 ie6、ie7、ie8ではdiv1とdiv2が横に並んでしまいました。 何か解決方法があれば教えてください。 よろしくお願いいたします。 <script type="text/javascript"> window.onload = function() { div1 = document.getElementById("div1"); div2 = document.getElementById("div2"); div1.onmouseover = function() { div1.style.display = "none"; div2.style.display = "block"; }; div2.onmouseout = function() { div1.style.display = "block"; div2.style.display = "none"; }; div1.style.display = "block"; div2.style.display = "none"; }; </script> <div id="div1" class="box01"> <div id="pic"><img src="image01.gif"></div> <div id="txt">てきすとてきすと</div> </div> <div id="div2" class="box02"> <div id="pic"><img src="image02.gif"></div> <div id="txt">てきすとてきすと</div> </div>
- ベストアンサー
- JavaScript
- リンク押下でタグを書き換えたい
リンクが複数あって、押したリンク文字だけ<span></span>のみにしたいと 思っています。また対応するdivタグのdisplay属性も書き換えたいです。 とりあえず思いついたのは以下の方法なのですが、冗長ですし、 リンクの数が増えた場合に足していくのが大変です。 もっとシンプルに書く方法がないものでしょうか。 ご助言ください。 <html> <body> <script> function change(spanid,divid,menuName){ document.getElementById('menu1').innerHTML = "<a href=\"javascript:void(0)\" onclick=\"change('menu1','div1','メニュー1')\">メニュー1</a>"; document.getElementById('div1').style.display="none"; document.getElementById('menu2').innerHTML = "<a href=\"javascript:void(0)\" onclick=\"change('menu2','div2','メニュー2')\">メニュー2</a>"; document.getElementById('div2').style.display="none"; document.getElementById('menu3').innerHTML = "<a href=\"javascript:void(0)\" onclick=\"change('menu3','div3','メニュー3')\">メニュー3</a>"; document.getElementById('div3').style.display="none"; document.getElementById(spanid).innerHTML = menuName; document.getElementById(divid).style.display="block"; } </script> <ul> <li><span id="menu1">メニュー1</span></li> <li><span id="menu2"><a href="javascript:void(0)" onclick="change('menu2','div2','メニュー2')">メニュー2</a></li> <li><span id="menu3"><a href="javascript:void(0)" onclick="change('menu3','div3','メニュー3')">メニュー3</a></li> </ul> <div id="div1"> test1 </div> <div id="div2" style="display:none"> test2 </div> <div id="div3" style="display:none"> test3 </div> </body> </html>
- ベストアンサー
- JavaScript
- Firefoxでマウス座標の取得
クリッカブルマップのマウスオーバー時にdivを表示させようと、以下のようなコードを書きました。 これだとFirefoxに対応していないのですが、どうやったら同じように座標を取得できるのかわかりません。 どなたかご教示をお願いします。 <script type="text/javascript" language="JavaScript"> <!-- function up(text){ document.getElementById('key').innerHTML=text; set.style.posLeft =document.body.scrollLeft+window.event.offsetX+150; set.style.posTop =document.body.scrollLeft+window.event.offsetY+250; document.all('set').style.display="block"; } function del(){ document.all('set').style.display="none"; } //--> </script>
- 締切済み
- JavaScript
- 表示・非表示のスクリプトで、複数指定する場合はどうしたらいいですか？
複数のコンテンツをボタンクリックにて表示・非表示にしたいのですが、うまくいきません。 なんとか、2つまではわかったのですが、3つまで表示すると3つ目が非表示になってくれません。 最終的には5つくらいを下記のスクリプトで行いたいのですが、どうすれば、複数のIDを対応させることができますか？ ●例えば、test1を押した際、test2と3は非表示としたいです。 <script language="JavaScript" type="text/JavaScript"> <!-- function ChDsp2(strShow,strHidden){ var obj=''; obj=document.all && document.all(strShow) || document.getElementById && document.getElementById(strShow); obj.style.display = "block"; obj=document.all && document.all(strHidden) || document.getElementById && document.getElementById(strHidden); obj.style.display = "none"; } //--> </script> <a href="javascript:ChDsp2('text1','text2');">1を表示</a> <a href="javascript:ChDsp2('text2','text1');">2を表示</a> <a href="javascript:ChDsp2('text3','text1');">3を表示</a> <span id="text1" style="display:block;">111111</span> <span id="text2" style="display:none;">222222</span> <span id="text3" style="display:none;">333333</span> どなたか教えてください。お願いします。
- ベストアンサー
- JavaScript
- javascriptでid要素の取得について
お世話になります。 最近、javascriptの勉強を始めたたのですが、 以下の違いがよくわかりません。 ------------------------------------------------------- <html> <head><title>Test</titile></head> <body> <div id='wrapper'></div> </body> </html> <script language='javascript'> function aaa() { document.getElementById("wrapper").style.display = "none";//---(1) wrapper.style.display = "none"; //---(2) } </script> (2)は、document等省略してますが、その違いは無視して 頂ければと思います。 (1)でわざわざgetElementByIdを使用してid要素を取得 するメリットがわかりません。 初心者の質問で申し訳ありませんが、よろしくお願い致します。
- 締切済み
- JavaScript
- 『オンマウスで説明文を表示』について
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>
- 締切済み
- JavaScript
- オンマウスで表示されるサブメニューについて
よろしくお願い致します。 メインメニューにオンマウスすると、サブメニューが表示される ようにしたく、下記のようなコードを使用しています。 FirefoxやsSafariで起きる問題なのですが、サブメニューを表示 した状態で他のページに移動後、ブラウザのバックを使用しても 戻ってきたとき、移動前に表示していたサブメニューが開いたまま になっており、その後ずっと開いたままで非表示にならないことが あります。 色々試してみたのですが、うまく行かず困っています。 どうか解決策をお教え下さいますようお願い致します。 <html> <head> <script type="text/javascript"> <!-- function showHide(targetID) { if( document.getElementById(targetID)) { if( document.getElementById(targetID).style.display == "none") { document.getElementById(targetID).style.display = "block"; } else { document.getElementById(targetID).style.display = "none"; } } } window.onload = function() { document.getElementById(targetID).style.display = "none"; }; //--> </script> </head> <body> <a href="#" onMouseOver="showHide('subnavi');return false;">メインメニュー</a> <div id="subnavi" style="display:none;"> <a href="http://www.yahoo.co.jp/">サブメニュー</a> </div> </body> </html>
- ベストアンサー
- JavaScript
- Javascriptを短くしたい
初歩的なことですみません。 Javascriptで表示／非表示を切り替えるものを作ろうと思うのですが、 以下のサンプル文のような形では、項目数が増えるとその分だけ どんどんJavascriptも長くなっていってしまいます。 Javascript文を簡潔にするには、どのように記述すればよいのでしょうか。 よろしくお願いします。 <script type="text/javascript"> <!-- function Hyo1(num) { if (num == 0) { document.getElementById("cont1").style.display="block"; } else { document.getElementById("cont1").style.display="none"; } } function Hyo2(num) { if (num == 0) { document.getElementById("cont2").style.display="block"; } else { document.getElementById("cont2").style.display="none"; } } // --> </script> <div id="cont1">ああああああ</div> <form> <input type="button" value="表示" onclick="Hyo1(0)"> <input type="button" value="非表示" onclick="Hyo1(1)"> </form> <form> <div id="cont2">いいいいいい</div> <input type="button" value="表示" onclick="Hyo2(0)"> <input type="button" value="非表示" onclick="Hyo2(1)"> </form>
- ベストアンサー
- JavaScript
- firefoxだけ、javascriptが思うように動作しません。
firefoxだけ、javascriptが思うように動作しません。 下記、html記述です。 <a href="javascript:void(0);" onclick="show1()">tab1</a> <a href="javascript:void(0);" onclick="show2()">tab2</a> <a href="javascript:void(0);" onclick="show3()">tab3</a> <div id="page1">page1</div> <div id="page2">page2</div> <div id="page3">page3</div> 下記、javascript記述です。 function show1(){ page1.style.display="block"; page2.style.display="none"; page3.style.display="none"; } function show2(){ page1.style.display="none"; page2.style.display="block"; page3.style.display="none"; } function show3(){ page1.style.display="none"; page2.style.display="none"; page3.style.display="block"; } tab1をクリックすると、page1のみ表示 tab2をクリックすると、page2のみ… という風に動作させたいです。 IE、opera、chromeでは動作しますが、 firefoxだけ全く動作しません。 どのように修正すれば動くようになるでしょうか？ javascriptについては初心者なので、 基本的なところから間違っているのかもしれませんが、 ご回答よろしくお願いします。
- ベストアンサー
- JavaScript
