- 締切済み
画像アイコンにリンクつけたいし、説明もポップアップさせたい
お世話になっております<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 」とありますが、ｐｘってなんでしょうか？
- aimer
- お礼率75% (432/575)
- HTML
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
みんなの回答
今度は一発でOKかな？（動作確認済み） <HEAD> <SCRIPT language="JavaScript"> <!-- function NewWindow(url) { if (url != '') { window.open(url, '_blank', "toolbar=no,location=no,scrollbars=yes,width=300,height=300,left=0,top=0"); } } //--> </SCRIPT> </HEAD> <BODY> <P><A href="***1.htm" onclick="NewWindow('***2.htm');"><IMG src="***.gif" width="50" height="50" border="0"></A></P> </BODY>
- elttac
- ベストアンサー率70% (592/839)
どうしても，おっしゃるような派手な方法がご希望ならば別ですが，シンプルな方法でしたら，「一発」です。アイコンをクリックするとページ移動，でよろしいですね。 <a href="リンク先 URL" title="ツールチップの文字列"><img src="アイコンの URL" alt="ツールチップの文字列" width="アイコンの幅" height="アイコンの高さ" border="0"></a> でいかがでしょうか。この場合は，a 要素の title 属性と，img 要素の alt 属性に，同じ値を与えておくとよいでしょう。 それから，「px」ですが，これは CSS（カスケーディングスタイルシート）で使う単位で，「ピクセル」です。「1px」で「1 ピクセル」を表します。
お礼
ん～～～～～～。 それは、本当にシンプルに、リンクをするだけですよね。。（涙 画像をポイントすると、説明？もでるようにしたいんです。。 px、なるほど１ありがとうございました(^_^)/ ピクセルなのですねｖ
関連するQ&A
- 「カーソル当てると説明が出る方法」
<ait>や<title>でなく カーソルを当てると自分の好きな「背景色や枠色」で 説明文が出るようにしたいのですが中々うまくいきません。 そこで、あるサイトの方のソースを見て そのままタイトルや説明文章を変えてみたら表示できました。 －<a href="○○.html" onmouseover="txt1.style.display='block'" onmouseout="txt1.style.display='none'">○○タイトル</a> <span id="txt1" style="display:none;position:absolute; border:3px solid #006633;color:#ffffff;background-color:#000000;">○○説明</span> ここにあろ<span id="txt1>という物が何か分かりません。 自分でＣＳＳで<txt1>を作らないといけないでしょうか？ もし.txt1 を作るなら何を記入すれば良いのですか？ またこのまま、この方のソースをコピペして使った場合 もしこの方がサイトを閉鎖しても 僕がコピペした部分はそのまま生きていますでしょうか？ もし手直し等必要ならどうか教えてください。 このままで良いのか手直しがいるのかが分かりません。
- 締切済み
- ブログ
- カーソルを当てると真下に説明文が来て困ってます。
<div class="sub3"><img src="○○.gif"> <a href="http:○○.html" onmouseover="txt4.style.display='block'" onmouseout="txt4.style.display='none'"> ○タイトル○</div></a> <span id="txt4" style="display:none;position:absolute; border:3px solid #ff0000;color:#FF0099;background-color:#FFFFCC;"> ○説明文○ </span> と記入したのですがカーソルを当てると説明文が 真下に来てしまいます。 右横に来るようにするにはどうしたら良いでしょうか？ なお<div class="sub3">というのは .sub3 { width: 180px; height: 8px; padding: 2px 7px 0px 0px; font-weight: bold; color: #ff69b4; font-size:11px; } という定義です。 どうしたら真下でなく横に説明文の枠が来るようにできますか？
- 締切済み
- ブログ
- カーソル当てると説明文出るようにしたいんです。
CSSで今ＨＰ作っています。 カーソルを当てると説明文が出るようにしたいのですが どういうタグをCSSで作ったら良いか分かりません。 <alt="○○">や<title="○○">で出るような窓ではなく 自分で[好きな背景色]にしたり出来る説明窓を作りたいのです。 例えば http://myako.net/linkjs.html ここのようにしたいのです。 あるＨＰのソースを見たら <span id="txt1" style="display:none;position:absolute; border:3px solid #006633;color:#ffffff;background-color:#000000;">○○</span> となっていたのですがこれを記入しても文字が出てきませんでした。 何をどう記入し作ったら良いのか分からないので 作成法を教えてください。 または方法を教えてくれているサイトがありましたらを教えてください。
- ベストアンサー
- ブログ
- オンマウス
<a onmouseover="txt1.style.display='block'" onmouseout="txt1.style.display='none'">$data[1]</a> <span id="txt1" style="display:none;position:absolute; border:1px outset 線の色;color:説明文の文字色;background-color:#ffffe1;width=465;">$data[2]<br></span> オンラインマウスのサイトで上記の物を使用しています。 CGIで上記の物を使用していますが同一ページに複数あるとエラーで文字が表示されません。 「txt1」を変更すれば表示されるのは分かっているのですが、いちいち「txt1.txt2...」と変更せずに、これを同一ページに複数表示させるにはどうしたらよいでしょうか？。
- ベストアンサー
- JavaScript
- テーブルとオンマウス
<span> <a onmouseover="setSpanDisplay(this,'block')" onmouseout="setSpanDisplay(this,'none')">test</a> <span class="txt1" style="display:none;position:absolute;border:1px outset 線の色;color:説明文の文字色;background-color:#ffffe1;width=465;">ほげ1<br></span> </span> <span> <a onmouseover="setSpanDisplay(this,'block')" onmouseout="setSpanDisplay(this,'none')">test</a> <span class="txt1" style="display:none;position:absolute;border:1px outset 線の色;color:説明文の文字色;background-color:#ffffe1;width=465;">ほげ2<br></span> </span> <span> <a onmouseover="setSpanDisplay(this,'block')" onmouseout="setSpanDisplay(this,'none')">test</a> <span class="txt1" style="display:none;position:absolute;border:1px outset 線の色;color:説明文の文字色;background-color:#ffffe1;width=465;">ほげ3<br></span> </span> <span> 以前ここで回答を頂いた上記をスクロールバー付きのテーブルの中で使おうと思いましたが（少し省略してあります）問題が発生したので質問しました。 分かりづらいですが、画像で解説です。 http://www3.ezbbs.net/22/kinokokinoko/img/1185714736_1.JPG スクロールバー付きのテーブルの中の文字Aの上にマウスを置いた時に文字Cの位置、つまりスクロールバー付きのテーブルの外側に文字を出したいのです。 しかし、実際にはスタイルシートで位置を指定してもマウスを文字Aの上に置いた時、文字Bのようにスクロールバー付きのテーブルの内部に文字が表示されてしまいます。 これを最初に書いた通り、スクロールバー付きのテーブルの外側に文字を指定の位置に表示する方法はあるのでしょうか？。
- ベストアンサー
- HTML
- スタイルシートでレイアウトしたいのですが出来ません。
<a href="○○.html" onmouseover="txt1.style.display='block'" onmouseout="txt1.style.display='none'"> ○○タイトル○○</div></a> <span id="txt1" style="display:none;position:absolute; border:3px solid #ff0000;color:#FF0099;background-color:#FFFFCC;"> ○○説明文○○</span> 上のような<txt>タグが全部で２０個以上あるので （つまりtxt1～txt20まであります） CSSでレイアウトしたいのですがうまくいきません。 上のタグをCSSでどのように定義づけたら <div class>で作れるようになるか教えてください。
- 締切済み
- ブログ
- ネットスケープでも見えるオンマウスの説明文
ボタンに触れると説明文が出て、ボタンを押すとリンク先に飛ぶというのがIEではできました。ところが、NNだと、ボタンに触れても説明文が表示されません。 NNでもIEでもできるようにすればどうすればよいのでしょうか？ <a href="リンク先のアドレス" onmouseover="txt1.style.display='block'" onmouseout="txt1.style.display='none'"> <img src="ボタンのファイル名"></a><br> <span id="txt1" style="display:none;position:absolute; color:説明文の色;background-color:white"> 説明文</span> ※ボタンを押したときに、ボタンが黒い点々で囲まれる（リンクを示すもの？）は説明文をいっしょに囲みたくないのでこうなりました。
- ベストアンサー
- HTML
- 「リンクにマウスオーバーするとポップアップで説明が表示される」ができません
はじめまして。 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> この様に記述したのですがどこが間違っているのかわかりません。 仕事で使わなければならず非常に困っています。 宜しくお願いします。
- ベストアンサー
- JavaScript
- 非リンク画像にポップアップ、ブラウザでの違い
質問、失礼いたします。 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
- 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
お礼
いつもいつも大変ありがとうございます(*^。^*)Javascriptでもリンクがつけれるということでしょうか。。（まったくの初心者ですみません(^^ゞ） コピってためしてみましたが、画像をポイントすると、説明文もポップアップするようにしたかったのですが、それはできなかったようです。。(涙 わたしの質問のなかにあった、ソースですが、ためしにそのまま並べてhtmlで保存したところ、うまく、画像をポイントすると、説明文もでて、リンクもできました(^_^)/わたしの質問の仕方が悪かったのなら、本当にすみません<m(__)m>