代替文字を指定していても、
ツールチップには表示させなくする
代替文字(alt属性値)を指定していても、ツールチップには表示されなくする記述方法があります。 この方法を使えば、Internet Explorerでの表示でも、煩く感じることがなくなります。
方法はとても簡単で、画像を記述するimg要素内に「title属性」を加えて、以下のように記述します。
<img src="news.gif" width="200" height="78" alt="ニュース" title="">
title属性を加えて、値には何も記述しないでおきます。
こうすると、IEで表示させた場合でも、下図のようにツールチップは表示されなくなります。
ツールチップは出なくなりますが、alt属性値には代替文字が記述されているため、画像が表示されなかった場合には、代替文字がちゃんと表示されます。
alt属性とtitle属性が両方記述されている場合
IEでは、画像の上にマウスポインタが載せられた場合、以下のようにツールチップの表示内容を決定します。
IEは、alt属性値に指定された文字列も、title属性値に指定された文字列も、どちらもツールチップに表示します。 しかし、alt属性とtitle属性が両方指定されている場合には、title属性が優先され、alt属性は考慮されなくなります。
ですから、title属性を記述して属性値を空(カラ)にすれば、(alt属性に値が記述されていても)ツールチップは表示されなくなります。
IE以外でも、画像にツールチップを表示させたい場合
title属性を記述して属性値に文字列を指定すれば、IE以外のブラウザでも(画像の上にマウスポインタを載せた際に)ツールチップを表示させることができます。
<img src="highway.jpg" width="214" height="143" alt="高速道路の写真" title="日本の高速道路">
上記のようにtitle属性値に文字列を記述すれば、IE以外のブラウザ(※)でも、「日本の高速道路」という文字列がツールチップとして表示されます。
※少なくとも、Firefox・Safari・Opera・Google Chromeではツールチップに表示されます。
おわりに
今回は、画像にマウスポインタを載せた際に、代替文字がツールチップに表示されるのを防ぐ方法をご紹介いたしました。
タイポグラフィーなど、代替文字をツールチップに表示させると煩く感じてしまう場合にご活用下さい。