CSS の background 画像にツールチップを表示するテクニック

CSS の background 画像にツールチップを表示するテクニック

Posted at September 13,2006 1:00 AM
Tag:[CSS]

CSS の background プロパティで設定した画像にマウスをポイントした時、img タグに title 属性(または alt 属性)を指定した時のようにツールチップを表示させる方法です。*1
これは mixi の「小粋なユーザコミュニティ」の質問「ブログのタイトルバナー画像に alt 属性は設定できますか?」の回答です。*2

CSS の background 画像に alt 属性を設定することはできませんが、同様の機能を実現することは可能です。

とりあえず img 要素を用いた画像と、div 要素に background 指定した画像のサンプルを用意しましたのでお試しください。
右クリックすれば異なる設定であることがお分かりになると思いますが、いずれの画像もマウスをポイントするとツールチップを表示するようにしています。

img 要素 + alt 属性のサンプル

This is Movable Type logo.

div 要素 + background 指定のサンプル

ということで回答です。
background 指定の画像は、画像を設定した元の HTML タグに title 属性を設定することでツールチップを表示させています(青色部分)。

HTML

<div id="logo" title="This is Movable Type logo."></div>

CSS

#logo {
    width:120px;
    height:60px;
    background: url(http://path/to/images/logo.gif) no-repeat;
}

サンプルは div 要素を用いましたが、title 属性が設定可能なタグであればツールチップの表示が可能と思われます。また画像を表示しなくても、例えばテキストにマウスをポイントしてもツールチップは表示されます。

参考サイト:RE: [css-d] ALT attributes in CSS background images

2006.09.18 追記
*1、*2 を追加しました。

2006.09.21 追記
「alt 属性= ツールチップ表示」という誤解を招くため、タイトル変更しました。


*1:alt 属性は、画像が表示されない場合の代替テキスト表示が本来の目的で、ツールチップ表示はブラウザ依存です(エントリー投稿以前よりその認識はありましたが説明不足でした)。例えば img 要素を Mozilla 系ブラウザ(Firefox 等)や Opera で表示する場合、title 属性を設定しないとツールチップは表示されません(サンプル(上)は title 属性も設定しています)。

*2:質問自体はツールチップ表示を期待されたものであるかどうかは定かではありません(私の一方的な解釈です)。「代替テキスト表示」が目的であれば解決するための内容はありません。

関連記事
zenback
人気エントリー
トラックバックURL


トラックバック

img 要素の扱いと alt 属性 from SOL
ツールチップと alt 属性。ツールチップを表示させたいなら title 属性か、できればスクリプトを使うほうがよりよい、という話。 [続きを読む]

Tracked on September 17, 2006 3:30 PM
コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)