

<a class="tooltip"><span>ツールチップ</span></a>
a.tooltip span {
display: none;
}
a.tooltip:hover span {
display: block;
}
上記のようにしてcssだけでツールチップを実装しています。
これを応用して、クリッカブルマップにツールチップを実装したいのですが
<map>
<area shape="rect" coords=",,,"/>
</map>
このようにタグが<a>の場合と異なっており、どのように記述すればよいのかわかりません。
やり方を教えてほしいです。
どうぞよろしくお願いします。
No.1ベストアンサー
- 回答日時:
area には hover をかけることができないので、
画像の上に レイヤーのように 擬似空間を作り、そこに a で指定してあげる方法が
よいと思います。
擬似空間の作り方は、透明gifを 乗せる等です。
.parent{position:relative;top:0;}
.child{position:absolute;top: --;left: --;}
a.tooltip span{display:none;}
a.tooltip:hover span{display:block;}
<div class="parent">
<img src="" alt="この画像はbackgroundにしてもいいかもしれません">
<div class="child"><a class="tooltip" href=""><img src="透明.gif" alt=""><span>aaa</span></a></div>
</div>
また jquery を使うという 方法もあるとおもいます。
その場合はarea でも いけるとおもいます。コード書き換えは発生すると思いますが。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
HTML要素のid/class名の長さに...
-
CSS内で使われる山括弧の意味が...
-
最近、HTMLのヘッダーをIDで定...
-
クリッカブルマップにツールチ...
-
個別にリンクの色を変える方法
-
idの中のid指定
-
cssで文字サイズ指定、ptでもpx...
-
ドロップダウンメニューが隠れ...
-
htmlの文字が縦書きになる
-
【CSS】ヘッダーの高さが不明の...
-
<li>タグの数が増えすぎたので...
-
divタグ内のコンテンツが重なっ...
-
複数のボタンを等間隔に、かつ...
-
番号付きリスト(<Ol><Li>・・...
-
html/cssの、navを2段にする...
-
C言語線形リストの問題です
-
HTML属性での「""」 「''」違い
-
HP 画像の一部にリンクでその...
-
クロームとサファリでスクロー...
-
<div>と<div>の間の10px程の...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlのid属性って必要なの?
-
個別にリンクの色を変える方法
-
idの中のid指定
-
liリストタグの背景色に色がつ...
-
サイトにjQueryが使用されてい...
-
HTML要素のid/class名の長さに...
-
CSSのクラス名・ID名の指定でワ...
-
a要素の色を複数使い分ける方法
-
FC2掲示板をトピック一覧表示型...
-
スタイルシートについて
-
CSSに同じclass名がいっぱい‥。...
-
brにクラスをつけてcssでdispla...
-
webデザイン 疑問点
-
CSS 記事内link色変更方法
-
親エレメントに含まれる子エレ...
-
cssでIEとFIREFOX(とchrome)の...
-
CSS内で使われる山括弧の意味が...
-
css:positionの挙動について
-
スタイルシートのドットが#に...
-
dreamweaverのコード画面で波線。
おすすめ情報