- ベストアンサー
「リンクにマウスオーバーするとポップアップで説明が表示される」ができません
はじめまして。 Javascriptは初心者でわからないことがありましたので、どなたかお答えいただけないでしょうか？ MdNから出版されている、プロとして恥ずかしくないJavascriptの大原則の中で紹介されている「リンクにマウスオーバーするとポップアップで説明が表示される」を入力したのですが、まったく再現できません。 <link href="css/design.css" rel="stylesheet" type="text/css" media="all"> <style type="text/css" media="all"><!-- .Help{ font-size:x-small; background-color:#eee8aa; color:#6666ff; position:absolute; left:0px; top:0px; padding:3px; border-color:#003399; border:solid; border:1px; } //--></style> <script type="text/javascript"><!-- function OnScreenHelp(x,y){ if(document.all){ document.getElementByld(strID).style.left = event.x + document.body.scrollLeft + 15; document.getElementByld(strID).style.top = event.y + document.body.scrollTop + 0; }else{ document.getElementByld(strID).style.left = x + 15; document.getElementByld(strID).style.top = y + 0; } document.getElementByld(strID).style.display ="; } function OffScreenHelp(){ document.getElementByld(strID).style.display='none'; strlD="; } //--></script> </head> <body> <span class="Help" style="display:none; z-index:1000" id="About">会社概要をご紹介します</span> <span class="Help" style="display:none; z-index:1000" id="products">最新情報を紹介します<img src="img/up.gif"></span> <h1> <a href="index.html" onMouseOver="strID='About'; OnScreenHelp(event.pageX,event.pageY);" onMouseOut="OffScreenHelp()">About</a> </h1> <h1> <a href="index.html" onMouseOver="strID='Products'; OnScreenHelp(event.pageX.event.pageY);" onMouseOut="OffScreenHelp()">Products</a> </h1> </body> この様に記述したのですがどこが間違っているのかわかりません。 仕事で使わなければならず非常に困っています。 宜しくお願いします。
- yuta_2007
- お礼率25% (1/4)
- JavaScript
- 回答数4
- ありがとう数3
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
<!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" lang="ja" xml:lang="ja"> <head> <title>Q3381972 TestCase 1</title> <link href="css/design.css" rel="stylesheet" type="text/css" media="all"> <!-- 俺はコメントアウト嫌いなのでどうせなら外部ファイルに分ける --> <!-- 今回は直すのが面倒なのでTransitional DTDで勘弁してください --> <style type="text/css" media="all"> .Help{ font-size:x-small; background-color:#eee8aa; color:#6666ff; position:absolute; left:0px; top:0px; padding:3px; border-color:#003399; border:solid; border:1px; } </style> <script type="text/javascript"> var strID; /* 変数宣言ないと落ち着かない*/ function OnScreenHelp(x,y){ if(document.all){ document.getElementById(strID).style.left = event.x + document.body.scrollLeft + 15; document.getElementById(strID).style.top = event.y + document.body.scrollTop + 0; }else{ /* Minefieldでしか確認してないが，各プロパティには単位が必要。IEの方の調査は他回答者に譲る。 alertで表示させて調べたがxやyは単位が付かないようだ */ document.getElementById(strID).style.left = x + 15 + "px" ; document.getElementById(strID).style.top = y + 0 + "px"; } document.getElementById(strID).style.display =""; /* 指摘のあった引用符を修正 */ } function OffScreenHelp(){ document.getElementById(strID).style.display='none'; strlD=""; /* 指摘のあった引用符を修正 */ } /* 何故かIdじゃなくてldになっているので修正。*/ </script> </head> <body> <span class="Help" style="display:none; z-index:1000" id="About">会社概要をご紹介します</span> <!-- XHTMLにおいては，idは大文字と小文字を区別する。HTMLは全て大文字として扱われるが， ブラウザがフォローしている products→Products --> <span class="Help" style="display:none; z-index:1000" id="Products">最新情報を紹介します<img src="img/up.gif"></span> <h1> <a href="index.html" onMouseOver="strID='About'; OnScreenHelp(event.pageX,event.pageY);" onMouseOut="OffScreenHelp()">About</a> </h1> <h1> <!-- ピリオドじゃなくてカンマ --> <a href="index.html" onMouseOver="strID='Products'; OnScreenHelp(event.pageX,event.pageY);" onMouseOut="OffScreenHelp()">Products</a> </h1> </body> </html>
その他の回答 (3)
- STICKY2006
- ベストアンサー率29% (1536/5269)
こんちは。 ちょっと情報が少ないですかね。。。 とりあえず、本はちゃんと読みましたか？？ >>OnScreenHelp(event.pageX,event.pageY) 「event」オブジェクトはIEでも存在しますが、「pageX」「pageY」プロパティは、IEでの動作は対応していないかと思います。 そもそも、開発の環境が、IEなのか、そのほかのブラウザなのかも分からないので明確な答えは出せないですが。。。 他には。。。 >>document.getElementByld(strID).style.display ="; ↓ document.getElementByld(strID).style.display =""; 「"」２つです。 >>strlD="; ↓ strlD=""; ここも同じく。 後は、自分も、動作させられる環境が整っていないので判別できません。
補足
ご回答ありがとうございます。 環境はMacでSafariです。 「"」が抜けていたのは修正できましたが、まだ表示されません。 WindowsのIEでも再現できないとまずいんですが・・・。
- hkd9001
- ベストアンサー率48% (99/204)
こんばんは。 明らかに「これは？」という点だけを挙げてみます。 ご参考にしてください： 「 document.getElementByld(strID).style.display ="; 」 「 strlD="; 」 …ダブルクォーテーション（ " ）が１コだけなのは変ですね。 <a href="index.html" onMouseOver="strID='Products'; OnScreenHelp(event.pageX.event.pageY);" onMouseOut="OffScreenHelp()">Products</a> …「 pageX 」と「 event 」の間のピリオド ( . ) は、正しくはカンマ ( , ) なのでは？ これで解決につながればいいのですが。
補足
ご回答ありがとうございます。 ダブルクォーテーション（ " ）が抜けていた部分と >「 pageX 」と「 event 」の間のピリオド ( . ) は、正しくはカンマ ( , ) なのでは？ ↑これも対処したのですが解決できません。
- calltella
- ベストアンサー率49% (317/635)
一行目の↓「css/design.css」ファイルパスは合ってますか？ <link href="css/design.css" rel="stylesheet" type="text/css" media="all">
補足
ご回答ありがとうございます。 ご指摘の部分は間違いありませんでした。
関連するQ&A
- 画像アイコンにリンクつけたいし、説明もポップアップさせたい
お世話になっております<m(__)m> タイトルのとおりなのですが、画像アイコンにリンクつけたいし、説明もポップアップさせたいんです。 http://rurunta.gooside.com/ ↑のページを参考にしました。作者さま、ありがとうございます<m(__)m> それぞれ、下記のようなソースで作ればいいとのことですが、 <a href="表示させたいペ－ジのURL" onmouseover="txt1.style.display='block'" onmouseout="txt1.style.display='none'">表示させる文字</a> <span id="txt1" style="display:none;position:absolute; border:線の太さpx 線の種類 線の色;color:説明文の文字色;background-color:説明文の背景色;">説明文</span> どちらも同時に使いたい場合は、どうソースを並べればいいのでしょうか？ このページに、サンプルがありましたので、このページ自体のソースを見ようかと思いましたが、フレームでつくってあるせいか、発見できませんでした。。。 あと、このソースのなかに「border:線の太さpx 」とありますが、ｐｘってなんでしょうか？
- 締切済み
- HTML
- 『オンマウスで説明文を表示』について
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
- ポップアップウインド
下記のスクリプトでポップアップウインド内に『ポップアップを閉じるためのスイッチ』を設置したいのです。 －－－－－よろしくお願いします。－－－－－ <HTML> <HEAD> <TITLE>createPopup</TITLE> <SCRIPT> <!-- var oPopup = window.createPopup(); oPopup.document.body.onclick = fOnclick; oPopup.document.body.oncontextmenu = fOncontextmenu; function fOnclick() { var oSrcElement = oPopup.document.parentWindow.event.srcElement; if (oSrcElement.tagName == 'A') { window.navigate(oSrcElement.href); } } function fOncontextmenu() { return false; } function fShow() { oPopup.document.body.style.background = '#ffffee'; oPopup.document.body.style.border = 'outset 1px'; oPopup.document.body.style.padding = '1px'; oPopup.document.body.innerHTML = oSpan.innerHTML; oPopup.show('100', '30','200','200',document.body); } function fHide() { oPopup.hide(); } //--> </SCRIPT> </HEAD> <BODY onload="fShow()"><SPAN style="display:none" id="oSpan" onclick="fHide();"><A href="http://www.w3.org">createPopup</A><BR> <A href="http://www.google.co.jp">show</A><BR> <A href="http://www.yahoo.co.jp">hide</A><BR> <A href="http://java.sun.com">isOpen</A><BR> </SPAN><INPUT type="button" value="show" onclick="fShow()"><INPUT type="button" value="hide" onclick="fHide()"> </BODY> </HTML>
- ベストアンサー
- JavaScript
- ＩＥのイベントでのウインドウ位置の取得
以前に、MdNの「リンクにマウスオーバーするとポップアップで説明が表示される」というサンプルの記述がうまく動作しないという質問で、FairefoxやSafariではその回答でうまく動作するようなのですが、ＩＥの動作がまだ駄目なようなのです。 ＩＥのイベントが発生した時のマウス座標の取得は、Javascriptで、 function OnScreenHelp(x,y){ if(document.all) { /* IEでの処理 */ document.getElementById(strID).style.left = event.x + document.body.scrollLeft + 15; document.getElementById(strID).style.top = event.y + document.body.scrollTop + 0; }else{ /* IE以外の処理 */ document.getElementById(strID).style.left = x + 15 + "px"; document.getElementById(strID).style.top = y + 0 + "px"; } } のような記述になっているのですが、関数OnScreenHelp(x,y)のx,yがbodyの本文内で、event.pageX、event.pageYのようにＮＮ系の記述になっているため、ＩＥではこのx,yの値は使えないので上記のような記述になっているようなのです。上記の記述ではうまくポップアップしてくれないので、 event.xやevent.yの所の記述がまずいのかな？と思って、ちょっと調べてみて、window.event.offsetXやwindow.event.offsetYに変更してやってみたのですが、うまくいきません。ここの所の、IEの記述としては、どのように記述したらよいか分かりかねています。ご経験のある方、ご教示願えたらと思います。 よろしくお願い致します。
- 締切済み
- JavaScript
- マウスオーバー時の画像とCSSについて
久しぶりにHTMLをいじってたんですが、すっかり忘れちゃって 色々見てみたんですが、解決しなかったので教えて下さい。 indexと同じディレクトリにdesignというフォルダを作り中にmouse_over.cssという カスケードスタイルシートを作りました。 "mouse_over.css"の内容は a:link.link1{ display:block; width:100px; height:25px; background-image:url(./home.png); text-indent:-10000px; list-style:none; } a:hover.link1{ display:block; width:100px; height:25px; background-image:url(./home_over.png); text-indent:-10000px; list-style:none; } です。それと、上同ディレクトリにpicというフォルダを作り、homeとhome_overという2種類の画像を入れてあります。indexには、head内に <link rel="stylesheet" type="text/css" href="design/mouse_over.css" />というリンクを張り、 body内に<a href="リンク先URL" class="link1"></a>としましたが、画像が出ません。 上記のCSSをindex内に<style>括りで書くと、画像も表示されちゃんとマウスオーバーで 画像が変わるのですが、CSSを別に置くとindexは真っ白のまま何も表示されません。 何処が間違っているのかかなり色々やったのですが、まったくわからなくなってしまい、 困っております。 どうか智恵をお貸し下さい。宜しくお願いします。
- 締切済み
- ブログ
- 非リンク画像にポップアップ、ブラウザでの違い
質問、失礼いたします。 htmlとCSSで、画像のポップアップを作っています。 ソースは下記の通りです ■HTML部分 <a class="thumbnail" href="xxx"> <img src="xxx" border="0" /> <span><img src="ooo" /></span> </a> ■CSS部分 .thumbnail{ position: relative; z-index: 0; } .thumbnail:hover{ background-color: transparent; z-index: 50; } .thumbnail span{ position: absolute; background-color: lightyellow; padding: 5px; left: -1000px; border: 1px dashed gray; visibility: hidden; color: black; text-decoration: none; } .thumbnail span img{ border-width: 0; padding: 2px; } .thumbnail:hover span{ visibility: visible; top: 0; left: 60px; } ■サンプル掲載サイト http://akifumih.seesaa.net/article/111153756.html このコードを使い、HTML部分のリンクを外し <span class="thumbnail"> <img src="ｘｘｘ" /> <span><img src="ooo" /> </span> </span> として、Chromeで確認したら問題なかったのですが、 IEの場合、ポップアップをしなくなっていました。 この2つのブラウザで見た場合、どうして異なるのかが不明で ご存じの方がいらっしゃいましたら、ご教授お願い致します。
- ベストアンサー
- CSS
- テキストにマウスオーバーしたら任意の場所に画像表示させる方法で、
テキストにマウスオーバーしたら任意の場所に画像表示させる方法で、 画像と一緒に文字を表記させたいのですが、添付画像のように文字が 折り返ししてしまい、一列表示出来ません。 記述的には以下の通りです。 >スタイルシート部 /*Credits: Dynamic Drive CSS Library */ /*URL: ******/style/ */ .thumbnail{ position: relative; z-index: 0; } .thumbnail:hover{ background-color: transparent; z-index: 50; } .thumbnail span{ /*CSS for enlarged image*/ position: absolute; background-color: #FFFFFF; padding: 5px; left: -1000px; border: 1px solid gray; visibility: hidden; color: black; text-decoration: none; } .thumbnail span img{ /*CSS for enlarged image*/ border-width: 0; padding: 2px; } .thumbnail:hover span{ /*CSS for enlarged image on hover*/ visibility: visible; top: 160px; left: 450px; } >HTML部 <a class="thumbnail" href="" title="">ドゥカティGP9 No.27 CASEY STONER<span><img src="57197.jpg" /><br />ドゥカティGP9 No.27 CASEY STONER</span></a> コピーして応用している為、問題点が分かりません。 教えて下さい。
- 締切済み
- HTML
- 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
- IEでのポップアップ画像の位置「fixed」
オンマウスでポップアップする画像を、左上に固定したいのですが、 HTMLとCSSだけでは難しいのでしょうか？ HTMLとCSS以外の知識はほとんどありませんので、なんとかこの2つでとも思っているのですが… firefox・googleChromeでは下記のCSSで左上でポップアップ画像が固定されています。 IE8で確認したところ、どうしても画像の下に出てしまいます。 .thumbnail{ z-index: 0; font-size:12px; } .thumbnail:hover{ background-color: transparent; z-index: 50; } .thumbnail span{ position: absolute; background-color: #FFFFFF; padding: 5px; left: 10px; border: 1px dashed gray; visibility: hidden; color: black; text-decoration: none; } .thumbnail span img{ border-width: 0; padding: 2px; } .thumbnail:hover span{ visibility: visible; position: fixed; top: 10px; left: 10px; } ご教授いただければと思います。
- ベストアンサー
- CSS
- CSSでマウスオーバーを作成しています。
CSSでマウスオーバーを作成しています。 /**CSS内**/ #test { margin: 0; padding: 0; list-style-type: none; } #test li { text-indent: -9999px; width: 200px; height: 400px; margin: 0; padding: 0; background: url(aaa_ov.bmp) no-repeat -200px 0; ----- マウスオーバー時 } #test a { text-decoration: none; display: block; width: 200px; height: 400px; margin: 0; background: url(aaa.bmp) no-repeat 0 0; ----- 最初 } #test a:hover { text-decoration: none; background-color: transparent; background-image: none; } /**HTML内**/ <link rel="stylesheet" href="style.css" type="text/css" /> </HEAD> <BODY> <div align="center"> <ul id="test"> <li><a href="***.html">Home</a></li> </ul> </div> </BODY> としているのですが最初の画像も出ずうまくいきません。 画像パスも間違っていませんでした。 どのようにすればいいんでしょうか。 よろしくお願いします。
- ベストアンサー
- HTML
お礼
助かりました。 ご親切な回答ありがとうございました。
補足
ご回答ありがとうございます！ 完璧です！ありがとうございました。 これで今夜眠れます・・。 本当に助かりました。