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

灰色背景がサンプルソース

サンプルソース

HTMLソース

サンプル表示

→画像にカーソルを合わせた時に画像の説明文を表示する(サンプル)

解説

HTMLソース

画像にカーソルを合わせた時に画像の説明文を表示したい画像にtitle属性を記述します。
ここでは、<img alt="link" title="リンク"/>としています。

title="～"の～部分の文字がカーソルを合わせたときに表示されます。写真の簡易説明をしたり、英語表記の画像の日本語訳を表示したりするのに使うとよいかと思います。

なお、altは代替テキストというもので、画像が何らかの事情で表示されなかった際に代わりに表示される文字です。 titleはカーソルが合わさったときに表示される文字ですので、上手に使い分けてみて下さい。

詳細はHTMLタグリファレンス画像表示をお読み下さい。

CSSソース

本項目はHTMLのみで実現できる為、CSSは記述する必要がありません。