画像にカーソルを合わせた時に画像の説明文を表示する

Tweet

灰色背景がサンプルソース薄緑背景が実際の見た目

サンプルソース

HTMLソース

サンプル表示

上のボタン風画像にマウスカーソルを合わせると、その画像の説明が表示されます。
写真の簡易説明をしたり、英語表記の画像の日本語訳を表示したりするのに使うとよいかと思います。

解説

HTMLソース

画像にカーソルを合わせた時に画像の説明文を表示したい画像にtitle属性を記述します。
ここでは、<img alt=”link” title=”リンク”/>としています。
title=”～”の～部分の文字がカーソルを合わせたときに表示されます。
写真の簡易説明をしたり、英語表記の画像の日本語訳を表示したりするのに使うとよいかと思います。
なお、altは代替テキストというもので、画像が何らかの事情で表示されなかった際に代わりに表示される文字です。
titleはカーソルが合わさったときに表示される文字ですので、上手に使い分けてみて下さい。
詳細はHTMLタグリファレンス 画像表示をお読み下さい。