【ホームページ作成】画像にツールチップを表示させない方法

代替文字は代替以外の用途にも使われる

ウェブページ上に画像を掲載する場合は、何らかの事情で画像が読み込まれなかった場合のために、「代替文字」を記述しておけるようになっています。例えば以下のように記述します。

<img src="ファイル名" width="幅" height="高さ" alt="代替文字">

この「代替文字」の用途は、画像が表示されなかった場合に、画像の代わりとして表示させるものです。
しかし、Internet Explorerでは、画像が表示されている状態でも、マウスポインタを画像の上に載せると、ツールチップで代替文字が表示されます。

上記のような写真の場合は、代替文字がツールチップで表示されても、特に問題にはならないでしょう。
※むしろ便利だと思われるかもしれません。 しかし、代替文字がツールチップに表示されるのはIE独自の機能です。 多くの環境で同様に見せたい場合は、最初から（キャプションなどとして）文字を表示させておくか、もしくは後述のtitle要素を使う方が良いでしょう。

ツールチップを煩く感じる場合もある

以下のような画像の場合はどうでしょうか。この画像は、「ニュース News」と描かれたタイポグラフィーです。

上記の画像は、以下のようなHTMLソースで表示させたものです。 代替文字（alt属性の値）に「ニュース」という文字列を指定しています。

<img src="news.gif" width="200" height="78" alt="ニュース">

このソースをIEで表示させ、マウスを載せると下図のように見えます。

画像化された「ニュース（News）」という文字の上に、さらに「ニュース」という代替文字がツールチップで表示されています。 このような表示は、少々煩く感じてしまわないでしょうか。

だからといって、代替文字を省略してはダメ

代替文字（alt属性に記述した文字列）は、画像が表示されなかった場合に、画像の代わりに表示される文字列です。 ですから、省略せずに記述しておく必要があります。
※デザイン目的だけで掲載している画像など、特別な意味のない画像であれば、省略（＝属性値をカラに）しても問題ありません。

しかし、画像が問題なく表示されている状態では、代替文字がツールチップで表示されると、煩く感じてしまうこともあります。

代替文字をツールチップに表示させなくする

そこで、代替文字を指定していても、ツールチップには表示されなくする記述方法を使ってみましょう。 詳しい記述方法は次のページで。