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