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

解決済

質問者：EHHOSINGXEW
質問日時：2014/02/22 21:30
回答数：2件

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

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

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： ORUKA1951
回答日時：2014/02/23 15:55

　ウェブページの基本は、御存知だと思いますが「構造とプレゼンテーションの分離(

http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」でしたね。
　画像は必ずalt属性を記述されているはずです。
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
非テキスト系の要素である、IMG、AREA、 APPLET、INPUT要素は、著者に対し、当該要素が順当にレンダリングされない場合の要素内容として提供される代替テキストを指定することを求める。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Objects, Images, and Applets in HTML documents( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )］より
　ですので、何もしなくても画像にポインターを合わせれば通常のブラウザは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-html4 … )
※HTML5では、このHTML4.01の説明が守られなかったため新しい要素が追加されました。
　http://standards.mitsue.co.jp/resources/w3c/TR/h …
　ここでは、その名称と用途を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}
とか、

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