ホームページ作成/画像の表示・活用 (HTML,CSS,JavaScript)

画像にツールチップを表示させない方法

IEで画像を表示させると、画像の上にマウスを載せただけで「代替文字」がツールチップとして表示されます。これは画像によっては煩く感じられることがあります。代替文字をツールチップに表示させない方法をご紹介。

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

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

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

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

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

「画像にマウスを載せるとツールチップが表示される」サンプル画像
 

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

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

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

ニュース
 

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

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

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

「画像にマウスを載せるとツールチップが表示される」サンプル画像
 

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

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

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

画像が表示されなかった場合の表示例
 

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

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

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

  • 1
  • 2
  • 次のページへ

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます