更新日: 2017-09-04 (月) 16:32:09 (74d)

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

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

:Ajax
:Javascript

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

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

  1. まず、該当の図に、イメージマップ<area shape="rect" …>を作っておきます。
  2. <area>タグに、title属性をつけます。このtitle属性が、拡大されて表示されます。
    <area shape="rect" coords="19,120,92,173" href="#" target="マウスオーバーテスト"
    alt="マウスオーバーテスト" title="マウスオーバーテスト<br>" />
  3. 上記のサイトさんで紹介されていたように、Javascript、CSSを読み込ませます。jQueryも読み込ませるのを忘れないように! [huh]
  4. 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

選択肢 投票
このページの情報は役に立った 8  
このページの情報は役に立たなかった 0  
どちらでもない 0  
このページが参照された数
Total: 8867, 今日: 5, 昨日: 0

でじうぃきは神奈川県横浜市の位置情報システム・スマホアプリ開発の株式会社オンラインコンサルタントが運営しています。
投稿
トップ   このページを編集する 再編集不可にする 差分 バックアップ 添付 複製 名前変更 リロード   新しいページを作る 一覧 検索する 最新の更新   ヘルプ   最終更新のRSS
Last-modified: 2017-09-04 (月) 16:32:09 (74d)