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

画像にツールチップを表示させない方法(2ページ目)

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

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

代替文字を指定していても、
ツールチップには表示させなくする

代替文字(alt属性値)を指定していても、ツールチップには表示されなくする記述方法があります。 この方法を使えば、Internet Explorerでの表示でも、煩く感じることがなくなります。

方法はとても簡単で、画像を記述するimg要素内に「title属性」を加えて、以下のように記述します。

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

title属性を加えて、値には何も記述しないでおきます。
こうすると、IEで表示させた場合でも、下図のようにツールチップは表示されなくなります。

代替文字がツールチップには表示されなくなるサンプル画像
 

ツールチップは出なくなりますが、alt属性値には代替文字が記述されているため、画像が表示されなかった場合には、代替文字がちゃんと表示されます。

alt属性とtitle属性が両方記述されている場合

IEでは、画像の上にマウスポインタが載せられた場合、以下のようにツールチップの表示内容を決定します。

ツールチップには、title属性があればその属性値が表示され、title属性がない場合にだけalt属性の属性値が表示されます。
 

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ではツールチップに表示されます。

title属性を使えば、IE以外のブラウザでも画像にツールチップを表示させられます。※IEもtitle属性値の方を優先してツールチップに表示します。
 

おわりに

今回は、画像にマウスポインタを載せた際に、代替文字がツールチップに表示されるのを防ぐ方法をご紹介いたしました。
タイポグラフィーなど、代替文字をツールチップに表示させると煩く感じてしまう場合にご活用下さい。

【編集部おすすめの購入サイト】
Amazonでホームページ作成の参考書をチェック!楽天市場でホームページ作成関連の書籍をチェック!
  • 前のページへ
  • 1
  • 2
※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

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