• ベストアンサー

オンマウスすると、画像と説明が表示される

<img src="" alt="ＡＡＡ">　という画像にポインタを合わせると、 「ＡＡＡ」という文字が現れますが、こういう感じで文字にポインタを合わせたら、 そこに画像と説明文を表示したいと思っています。 具体的には <a href="">Ａさんブログ</a> この「Ａさんブログ」の部分にポインタを合わせると、クリックする前に大まかなＡさんブログの画像と 説明文が表示される・・・という感じです。 わかりにくくて申し訳ありませんが、よろしくお願いします。

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

  • ベストアンサー
  • W_H
  • ベストアンサー率47% (21/44)
回答No.1

<a href="アドレス" title="説明">リンク</a> と、titleを入れてやればいいです。 意外にこれは何でも使えて、フォームに指定すると、カーソルが重なると、名前、題名、などのように説明を表示する事も可能です。 推奨はされていないとは思いますが、便利ですから試してみてください。

ame-sanc
質問者

お礼

ご回答を受けましていろいろと調べたところ、「&#13」で改行もできることがわかりました。 画像をここに表示するのは無理みたいですね。ありがとうございました。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. その他（プログラミング・開発）

関連するQ&A

  • 1つの画像オンマウスで3つの画像を切り替えたい！

    現在、下記のような感じで一つの画像オンマウスでその画像を含む3つの画像が切り替わるようにしています。 ---------------------------------- <a href="#" onMouseOver="11111.src='a.gif';22222.src='b.gif';33333.src='c.gif'" onMouseOut="11111.src='a_01.gif';22222.src='b_01.gif';33333.src='c_03.gif'"><img src="aaaaaa.gif" alt="" width="94" height="32" border="0" name="11111" /></a> <img src="b_01.gif" alt="" width="572" height="50" name="22222" /> <img src="c_01.gif" alt="" width="96" height="32" border="0" name="33333" /> ---------------------------------- IE6だと、きちんと表示されるのですが、 Firefoxだと表示がおかしくなります。 改善方法はありませんでしょうか？ 助けてください！

  • 画像にオンマウスで、説明文の色を変えたい

    画像にポインタを乗せると、同ページ内のその画像の説明文（テキスト）のところの文字色が変わるようにしたいんです。 画像にはすでに、下記のようなロールオーバー効果も組んでしまってるので、プラスして上記の効果をやりたいのですが…。 わかる方いらしたらご教授お願いします。 ↓画像のところに組んでいるロールオーバー効果 <A href="#" id="_HPB_ROLLOVER1" onmouseout="HpbImgSwap('_HPB_ROLLOVER1', 'gazou.jpg');" onmouseover="HpbImgSwap('_HPB_ROLLOVER1', 'gazou1.jpg');"><IMG src="gazou.jpg" title="gazou" width="106" height="149" border="0" name="_HPB_ROLLOVER1"></A>

  • jqueryでの画像表示について

    どなたか教えて頂ければ幸いです。 画像のプリロードをするためjqueryを書いているのですが、 うまくいかず助けて頂きたくまいりました。 <div id="slideshow" class="clearfix"> <ul class="slider clearfix"> <li><a href="#"><img src="img/dress1.jpg" alt="" /></a></li> <li><a href="#"><img src="img/dress2.jpg" alt="" /></a></li> <li><a href="#"><img src="img/dress3.jpg" alt="" /></a></li> <li><a href="#"><img src="img/dress4.jpg" alt="" /></a></li> <li><a href="#"><img src="img/dress5.jpg" alt="" /></a></li> <li><a href="#"><img src="img/dress6.jpg" alt="" /></a></li> <li><a href="#"><img src="img/dress7.jpg" alt="" /></a></li> <li><a href="#"><img src="img/dress8.jpg" alt="" /></a></li> <li><a href="#"><img src="img/dress9.jpg" alt="" /></a></li> </ul> </div> $('#slideshow .slider li').hide();//ページ上の画像を隠す var i = 0; var c = 0; $(window).bind("load", function() { var c = setInterval(showImg() , 500); }); function showImg() { var imgLength = $('#slideshow .slider li').length; if (i >= imgLength) { clearInterval(c); } $('#slideshow .slider li:hidden').eq(0).fadeIn(500); i++; } 上記のように書いたのですが、ループしてくれません。 i++がきいてないように思います。 一枚ずつ表示していき、非表示の最初のliにフェイドインさせるようにしています。 すみませんが教えて頂ければ幸いです。 宜しくお願い致します。

  • 画像が表示されない。

    質問させてもらいます。 jqueryのjCarouselLiteを使ってメニューを作りました。 その際、メニューをクリック等するとコンテンツが表示されるようにしようと思っているのですが、 初期状態を非表示にしたく、コンテンツ部分(AAA)を{ display: none; }にしました。 それでメニュークリックして表示させるまでは良いのですが、 AAAの中身（こちらにもjCarouselLiteのスライドを使用しています）の画像だけが表示されないのです。 jCarouselLiteを使用せず、普通に画像やテキストのみを置いた場合は問題なく動作します。 また、{ display: none; }を入れない場合も（見栄えの問題があるものの）問題なく動作します。 【メニュー部分】 <div class="carousel"> <div class="jCarouselLite"> <ul> <li><a href=""onClick="document.getElementById('AAA').style.display = 'inline';" /> <img src="img/1.jpg" /></a></li> </ul> </div> </div> 【コンテンツ部分】 <div id="AAA"> <div class="carousel2"> <a href="#" class="prev2"><img src="img/left.png" border="0" /></a> <a href="#" class="next2"><img src="img/right.png" border="0" /></a> <div class="jCarouselLite2"> <ul> <li><img src="img/001.jpg" /></li> <li><img src="img/002.jpg" /></li> <li><img src="img/003.jpg" /></li> </ul> </div> </div> </div> 上記のleft.pngなどは表示されるのですが、img/001.jpgなどが表示されません。 <div id="AAA"></div>内<div class="carousel2"></div>内に001.jpgを置いた場合は普通に表示されます。 問題の発生するjCarouselLite2のCSSは以下のとおりです。 .jCarouselLite2 { margin: 5px auto 0px; width: 560px; } .jCarouselLite2 li img, .jCarouselLite2 li p { background-color: #fff; width:500px; height: 333px; margin: 5px; } 説明不足もあるかも知れませんが、ご指摘いただけると幸いです。

    • ベストアンサー
    • CSS
  • それぞれの画像をオンマウスのときに違う画像にしたい

    下記【１】の通り、画像のランダムリンクはできたのですが それぞれの画像をオンマウスしたときに 違う画像を表示するにはどうすればよいでしょうか？ JavaScriptを使わずに、一枚の画像だけを変える場合は↓のようにやっておりました <a href="http://～" target="_blank" ><img src="img[0] " height="" width="" border="0" onmouseover="this.src='img[0] の色違い画像など';" onmouseout="this.src='img[0] と同じ、もしくは違う画像';"></a> ※例えばimg[0]をオンマウスしたときにimg[2]にしたいのではなく、 それぞれ個別に用意した画像(通常時、オンマウス時、離した後の画像３枚)にしたいのですが。 【１】 // ランダムに画像を表示する jmp = new Array(); img = new Array(); // ジャンプ先のアドレス(数字は画像と対応) jmp[0] = "http://～"; jmp[1] = "http://～"; jmp[2] = "http://～"; jmp[3] = "http://～"; jmp[4] = "http://～"; // 画像のアドレス(数字はジャンプ先のアドレスと対応) img[0] = "img/img1.jpg"; img[1] = "img/img2.jpg"; img[2] = "img/img3.jpg"; img[3] = "img/img4.jpg"; img[4] = "img/img5.jpg"; n = Math.floor(Math.random()*jmp.length); document.write("<a href='"+jmp[n]+"' target='_blank'>"); document.write("<img src='"+img[n]+"' border='0'>"); document.write("</a>");

  • 画像をそのままの大きさで新規窓に切り出したい

    全て必ず同じ大きさ（100x100px）で、同じような柄の画像が複数あります。 <a href="1.gif"><img src="1.gif" alt="画像1"></a> <a href="2.gif"><img src="2.gif" alt="画像2"></a> <a href="3.gif"><img src="3.gif" alt="画像3"></a> それぞれをクリックすると、各画像を新規ウィンドウ（サブ窓）に切り出して表示し、 並べて比較できるようにするための効率よい方法についてご教示ください。 具体的にコードで示していただけると大変ありがたいです。 （サブ窓が複数あっても見分けがつくよう、サブ窓のタイトル＝alt文字列にセットしたいです）

  • IE6でリンクや画像の説明が表示されなくなりました

    はじめまして。今回初めてこちらを利用させていただきます。 うまく説明することができずわかりにくいところもあると思いますがお許しください。 さて、質問なのですが、 IE6においてサイト閲覧時にオンマウスをしたとき等に表示される説明？が表示されなくなり困っております。 具体的には <A href="リンクアドレス" title="説明">文字</A> や <a href="リンクアドレス"><img src="画像アドレス" alt="説明"> などで指定されている「説明」が表示されません。 HTML支援のサイトなどを回って、いくつかのサイトで表示されないことを確かめたので私のブラウザがおかしいのだと思います。 特殊な設定等を行った覚えはないのですがこういうものに詳しくなく頭を抱えています。 インターネットオプションの設定等もわからないなりにいじってはみたのですが改善しませんでした。 (Javaの許可の安全性を変えてみたりチェックをいれたりはずしたりした程度です) 本当に説明が下手で申し訳ありません。 もしもこの件についてわかる方がいらっしゃいましたら、御力を貸していただけると嬉しいです。 どうぞよろしくお願いいたします。

  • アメブロで画像が拡大表示できません。

    アメブロで記事を作成して画像を載せましたが、画像をクリックしても拡大表示できません。 人のブログの写真はクリックすると拡大できます。 HTML表示では <a href="http://***.jpg"><img border="0" alt="*" src="http://***.jpg" width="*" height="*" /></a> となっています。 よろしくお願いします。

  • 画像の表示につきまして

    こんにちは。お世話になります。 　画像の表示について伺いたいことがございます。 　現在、HPを作成しています。そこには、横並びで三つの画像を配置しています。 　しかし、そのHPをいつ開いても、表示されるのは一番左の画像のみで、真ん中と右の画像は表示されません。 　ただし、マウスポインタを当てると、真ん中の画像も右の画像も表示されるようになり、以降は、画像が消えるような事はないのですが、その後、そのHPを閉じて、また開くと、同じように真ん中と右のみ表示されません。 　インターネットオプションの「画像を表示する」にも、きちんとチェックが入っていますし、他のPCで開いても同様の結果になります。 　こういう場合、どういった不具合が考えられるでしょうか。また、改善方法はありますでしょうか。 　因みに、下記のようなタグを使っており、マウスオーバーすると画像が切り替わるようにしてあります。 <p class="img"><a href="http://●●●"><img width="235" height="120" onmousedown="this.src='http://●●●/img1.jpg'" onmouseout="this.src='http://●●●/img1.jpg'" onmouseover="this.src='http://●●●/img1_on.jpg'" alt="画像" src="this.src='http://●●●/img1.jpg'" / border="0"></a></p> 　windowsXP IE6.0を使っております。 　皆様、お忙しい中恐れ入りますが、ご教示下さい。宜しくお願い致します。

    • ベストアンサー
    • HTML
  • 画像を横に並べるには？

    ブログでアフェリエイトをしたいのですが、画像の横に紹介文を回り込ませたり、また、画像の下に紹介文を入れたものを横に複数並べるにはどうしたら良いでしょうか？tableを使ったところレイアウトがずれてしまいした（忍者ブログを借りています）。 <a href=""><img src="" align="">紹介文</a><br clear""> <a href=""><img src=""><br>紹介文</a> まではできます。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する