alt属性とtitle属性について。

以前、「あなたのブログは大丈夫？(1)」で以下のような話をしました。

上級者の手法に「alt属性」を利用するというものがあります。

皆さんは普段スルーしてしまっていると思いますが、

<img src="//img01.i-ra.jp/usr/(あなたのID)/xxx.jpg" alt="" >

この「alt=""」の部分は、

本来、画像の内容を説明するテキストを入れるところです。

例えば「abc.jpg」という画像をアップロードして

<img src="//img01.i-ra.jp/usr/(あなたのID)/abc.jpg" alt="" >

この画像が正しくアップロ－ドされていなかった場合、通常は



のように×印だけが表示されますが、ここに

<img src="//img01.i-ra.jp/usr/(あなたのID)/abc.jpg" alt="ここに画像の説明が入ります" >

と入れておくことで、たとえ画像が表示されていなくても



と表示されるので、どんな画像を掲載するつもりだったかの見当がつきます。

（中略）

目の不自由な方が音声読み上げブラウザを利用して閲覧する際には

画像の代わりに説明文を読み上げてくれます。

なので、余裕があったら入れておくと良いでしょう。

さて、今回は「title属性」というものを使ってみます。

このような形で追加します。

<img src="//img01.i-ra.jp/usr/(あなたのID)/xxx.jpg" alt="" title="ここに説明文を入れます。" >

これによって、画像にマウスカーソルをあてた時に説明文が浮き上がります。

まずは、普通に

<img src="//img01.i-ra.jp/usr/semipro/tanukiko121022_02.jpg" alt="" >

とした場合の画像です。



次に

<img src="//img01.i-ra.jp/usr/semipro/tanukiko121022_02.jpg" alt="" title="田貫湖のさかさ富士です。" >

とした場合の画像です。マウスポインターをあててみて下さい。



どうでしょうか。後者の場合には、マウスポインターをあてたところに

このような“ふきだしチップ”が出現したと思います。（しばらくすると消えます）





画像だけではなく、通常の文字列にも適用出来ます。

<p title="こんなふうに表示されますよ。隠しメッセージにちょうどいいかも。">試しに、この行にマウスポインターをあててみて下さい。</p>

試しに、この行にマウスポインターをあててみて下さい。

使いすぎるとあちらこちらで“ふきだしチップ”が出て、

逆に見づらくなってしまうので注意が必要です。

必須の情報ではなく必ずしも表示されなくても困らない、

もしくは文中に記述する必要まではないけれども簡単な説明はつけておきたい、

といった場合に使用するのが実用的かと思われます。

長い文章の要約であるとか、リンク先の補足説明などですね。