2018年6月22日投稿者:

jQuery 大きな図に、部分的に説明をつける

jQuery 大きな図に、部分的に説明をつける

イメージマップ　マウスオーバーでエリアの説明を表示

Ajax
Javascript

何か大きな図があって、その部分部分の説明を表示させたい、ということは往々にしてあると思います。

CSSとjQueryを使ってマウスオーバー時にポップアップ表示にするTooltips
さんで紹介されていた、jQueryを利用したTooltipsを応用して、ちゃちゃっと作りたいと思います。

まず、該当の図に、イメージマップ
を作っておきます。
タグに、title属性をつけます。このtitle属性が、拡大されて表示されます。

 <area shape="rect" coords="19,120,92,173" href="#" target="マウスオーバーテスト"
 alt="マウスオーバーテスト" title="マウスオーバーテスト<br>" />

上記のサイトさんで紹介されていたように、Javascript、CSSを読み込ませます。jQueryも読み込ませるのを忘れないように！
javascriptの最後の一文を、次のように書き換えます。

 $(document).ready(function(){
 //これを下記に変更　 simple_tooltip("a","tooltip");
 	 simple_tooltip("area","tooltip");
 });

サンプルはこちらでどうぞ。
http://onlineconsultant.tv/bda-2011/test/image_mouseover_test.html

フッターに謎の空白ができてしまい、困っています。image_mouseover_test.jsを読み込まない他のページはきちんと表示されます。誰か助けて下さい！よろしくお願いします — よしお {2017-01-17 (火) 15:43:28}
div.tooltip内にtop: 0;を追加で、解決しました。お騒がせしました — よしお {2017-01-17 (火) 15:51:41}
ポップアップを画像だけにしたいのですが、グレーの帯とテキストを消すことができません。教えていただけますでしょうか。 — 野田です {2017-09-04 (月) 13:24:40}
野田ですさん、申し訳ありません。そういったサポートはこちらでは行っていません。質問サイトなどで質問してみてください。よろしくお願いいたします。 — 中の人 {2017-09-04 (月) 16:32:09}

関連

コメントを残すコメントをキャンセル

%d人のブロガーが「いいね」をつけました。