• 締切済み

「カーソル当てると説明が出る方法」

<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>という物が何か分かりません。 自分でCSSで<txt1>を作らないといけないでしょうか? もし.txt1 を作るなら何を記入すれば良いのですか? またこのまま、この方のソースをコピペして使った場合 もしこの方がサイトを閉鎖しても 僕がコピペした部分はそのまま生きていますでしょうか? もし手直し等必要ならどうか教えてください。 このままで良いのか手直しがいるのかが分かりません。

みんなの回答

noname#25358
noname#25358
回答No.1

>ここにあろ<span id="txt1>という物が何か分かりません。  そこは任意の名前です。なんでもいいです。  ただし、同じHTML内に同時に同じ名前をつけてはいけません。 >もしこの方がサイトを閉鎖しても >僕がコピペした部分はそのまま生きていますでしょうか?  なぜそのような不安を抱く必要があるのかが分かりません(^_^;  大丈夫です。

pome000999
質問者

お礼

>deagleさんへ deagleさん、超機械オンチな僕にも とても分かりやすく教えてkじゅださって ありがとうございました。 おかげで安心しました。

関連するQ&A

  • カーソルを当てると真下に説明文が来て困ってます。

    <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で今HP作っています。 カーソルを当てると説明文が出るようにしたいのですが どういうタグをCSSで作ったら良いか分かりません。 <alt="○○">や<title="○○">で出るような窓ではなく 自分で[好きな背景色]にしたり出来る説明窓を作りたいのです。 例えば http://myako.net/linkjs.html ここのようにしたいのです。 あるHPのソースを見たら <span id="txt1" style="display:none;position:absolute; border:3px solid #006633;color:#ffffff;background-color:#000000;">○○</span> となっていたのですがこれを記入しても文字が出てきませんでした。 何をどう記入し作ったら良いのか分からないので 作成法を教えてください。 または方法を教えてくれているサイトがありましたらを教えてください。

  • 画像アイコンにリンクつけたいし、説明もポップアップさせたい

    お世話になっております<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 」とありますが、pxってなんでしょうか?

  • ネットスケープでも見えるオンマウスの説明文

    ボタンに触れると説明文が出て、ボタンを押すとリンク先に飛ぶというのが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
  • スタイルシートでレイアウトしたいのですが出来ません。

    <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>タグが全部で20個以上あるので (つまりtxt1~txt20まであります) CSSでレイアウトしたいのですがうまくいきません。 上のタグをCSSでどのように定義づけたら <div class>で作れるようになるか教えてください。

  • オンマウス

    <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...」と変更せずに、これを同一ページに複数表示させるにはどうしたらよいでしょうか?。

  • 特定の場所の番号を連続して入力する方法やソフト

    <a onmouseover="txt1.style.display='block'" onmouseout="txt1.style.display='none'"> 上記ので「txt1」という2つの部分だけを <a onmouseover="txt2.style.display='block'" onmouseout="txt2.style.display='none'"> <a onmouseover="txt3.style.display='block'" onmouseout="txt3.style.display='none'"> 「txt2」「txt3」と書きかえていき、今現在1200まで書いてきました。 しかし「txt10000」まで書かなくてはいけません、大変なので数字の部分だけ連続して番号を書けるようになるソフトはありますでしょうか?。

  • テーブルとオンマウス

    <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
  • VBAでonclickイベントをクリックしたい

    お世話になります。 XP/エクセル2003/IE8使用です。 テーブルタグ内で、onclickイベントでクリックすれば画面遷移するタグを VBAでクリックしたいのですが、記述方法がわかりません。 (IE起動などは大丈夫です。また、aタグやinputタグのクリックは処理できます) 具体的には、画像の「重要情報」(タブ風テーブル)から「出品情報」(タブ風テーブル)に移動し、再度、「重要情報」に戻ってきたいです。 HTMLソースは下記の通りです。 '---「重要情報」 <td id="basics" class="titletab-active" nowrap="nowrap" onclick="productTableController.switchTab('basics');return false;"> <span class="requiredAsterisk bold" id="tabAsterisk_basics"> <img src="https://images*略*.gif"></span> <span class="sprites" id="validation_error" title="" onclick="" style="display: none;"></span> <span class="sprites" id="ldr_warning" title="" onclick="" style="display: none;"></span> <span class="sprites" id="quarantine_warning" title="" onclick="" style="display: none;"></span> 重要情報</td> '---???(何の記述なのか私には不明) <td id="variation" class=" titletab-inactive hide" nowrap="nowrap" onclick="productTableController.switchTab('variation');return false;" style="display: none;"> <span class="sprites" id="validation_error" title="" onclick="" style="display: none"></span> <span class="sprites" id="ldr_warning" title="" onclick="" style="display: none"></span> <span class="sprites" id="quarantine_warning" title="" onclick="" style="display: none"></span> バリエーション</td> '---「出品情報」 <td id="offer" class="titletab-inactive" nowrap="nowrap" onclick="productTableController.switchTab('offer');return false;"> <span class="requiredAsterisk bold" id="tabAsterisk_offer"> <img src="https://images*略*.gif"></span> <span class="sprites" id="validation_error" title="" onclick="" style="display: none;"></span> <span class="sprites" id="ldr_warning" title="" onclick="" style="display: none;"></span> <span class="sprites" id="quarantine_warning" title="" onclick="" style="display: none;"></span> 出品情報</td> よろしくお願いします。

  • 「リンクにマウスオーバーするとポップアップで説明が表示される」ができません

    はじめまして。 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> この様に記述したのですがどこが間違っているのかわかりません。 仕事で使わなければならず非常に困っています。 宜しくお願いします。