マウスカーソルで画像を触ったら、文字を表示する

質問

マウスカーソルで画像を触ったら、文字を表示するようにしたいのですが
それってどうやればいいのでしょうか？

よくある、うっすらと説明書きみたいなのを表示させたいです。
今は、画像にリンクを張ってるのですが、リンク先のURLがうっすら表示されます。

回答No.2

ORUKA1951 · ベストアンサー

ウェブページの基本は、御存知だと思いますが「構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )」でしたね。
　画像は必ずalt属性を記述されているはずです。
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
非テキスト系の要素である、IMG、AREA、 APPLET、INPUT要素は、著者に対し、当該要素が順当にレンダリングされない場合の要素内容として提供される代替テキストを指定することを求める。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Objects, Images, and Applets in HTML documents( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/objects.html#adef-alt )］より
　ですので、何もしなくても画像にポインターを合わせれば通常のブラウザはaltの内容を表示するはずです。
<p class="withMessage">
<img width="300" height="188" alt="富士山の写真" title="富士市より眺めた晴天時の富士山" src="http：//upload.wikimedia.org/wikipedia/ja/thumb/3/3e/MtFuji_FujiCity.jpg/300px-MtFuji_FujiCity.jpg">
</p>
・・・・wikiの画像です。:は：に置換してあるので戻すこと。メッセージ付だとclassで説明してあります。次の説明でこれを使用します。
　(注)class属性を併用することで、文書に構造を付加することができます。

説明書きのある写真でしたら、次のようにマークアップされていると思います。
<div class="figure">
　　<img width="300" height="188" alt="富士山の写真" src="http：//upload.wikimedia.org/wikipedia/ja/thumb/3/3e/MtFuji_FujiCity.jpg/300px-MtFuji_FujiCity.jpg">
　　<div class="figcaption">
　　　<p>富士市より眺めた晴天時の富士山</p>
　　</div>
</div>
※DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加する( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )
※HTML5では、このHTML4.01の説明が守られなかったため新しい要素が追加されました。
　http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements
　ここでは、その名称と用途をclass名にしています。HTML5では
　<figure>
　　　<img width="300" height="188" alt="富士山の写真" src="http：[略]">
　　　<figcaption>
　　　　<p>富士市より眺めた晴天時の富士山</p>
　　　</figcaption>
　</figure>
となります。

これにたいして、
div.figure{ /* 挿絵のブロック*/
position:relative;
}
div.figure div.figcaption{
position:absolute;
top:0;left:0;
opacity:0.6;
background-color:white;
display:none;
}
div.figure:hover div.figcaption{display:block}
とか、

時間が取れたら簡単なサンプルつくってみます。

お礼

回答頂きありがとうございました。

回答No.1

hamuty

例えば
<a href='[リンク先URL]' title='リンク先の説明'><img src='[画像のパス]' /></a>
とするとカーソルのすぐ下に「リンク先の説明」と表示されるはずです！

お礼

回答頂きありがとうございました。