大きな画像に部分的な説明をつけたい

一つの画像にマウスオーバーすることによって部分的に説明がポップアップ表示されることを目指しています。
mapタグを使おうと思ってhtmlを作成しましたが文字が画像下部に表示されるだけでマウスオーバーしても動いてくれません。スクリプト自体が間違っているのでしょうか？
html

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" src="style.js"></script> <link rel="stylesheet" type="text/css" media="screen" href="style.css"> <title>バーチャルレジストレーション-トップページ-</title> </head> <body> <header> <h2> <img src="脳logo2.jpg" alt="">バーチャルレジストレーション </h2> <nav> <ul class="Nav"> <li class="active"> <a href="top.html"><strong>トップ</strong><span>top</span> </a></li> <li> <a href="3×5holder.html"><strong>3×5</strong><span>holder</span> </a></li> <li> <a href="4×4holder.html"><strong>4×4</strong><span>holder</span> </a></li> <li> <a href="3×11holder.html"><strong>3×11</strong><span>holder</span> </a></li> </ul> </nav> </header> <h1 align="center"> バーチャルレジストレーション</h1> <HR size="3" width="65%" align="center" color="silver"> <article > <h2 align="center">国際10-20法</h2> <img src="10-20model.jpg" border="0" usemap="#Map"> <map name="Map" id="Map"> <area shape="circle" coords="100,38,7" href="#" target="G" alt="G" title="G<br>眉と眉の間"/> </map> </article> </body> </html>

javascript
function simple_tooltip(target_items, name){
$(target_items).each(function(i){
$("body").append("<div class='"+name+"' id='"+name+i+"'><p>"+$(this).attr('title')+"</p></div>");
var my_tooltip = $("#"+name+i);

    if($(this).attr("title") != "" && $(this).attr("title") != "undefined" ){  
      
    $(this).removeAttr("title").mouseover(function(){  
                my_tooltip.css({opacity:0.8, display:"none"}).fadeIn(400);  
    }).mousemove(function(kmouse){  
            var border_top = $(window).scrollTop();   
            var border_right = $(window).width();  
            var left_pos;  
            var top_pos;  
            var offset = 20;  
            if(border_right - (offset *2) >= my_tooltip.width() + kmouse.pageX){  
                left_pos = kmouse.pageX+offset;  
                } else{  
                left_pos = border_right-my_tooltip.width()-offset;  
                }  
                  
            if(border_top + (offset *2)>= kmouse.pageY - my_tooltip.height()){  
                top_pos = border_top +offset;  
                } else{  
                top_pos = kmouse.pageY-my_tooltip.height()-offset;  
                }     
              
              
            my_tooltip.css({left:left_pos, top:top_pos});  
    }).mouseout(function(){  
            my_tooltip.css({left:"-9999px"});                   
    });  
      
    }  

});

}

$(document).ready(function(){
simple_tooltip("area","tooltip");
});

css
div.tooltip {
width: 250px;
position: absolute;
left: -9999px;
background: #EEE;
padding: 5px;
border: 1px solid #AAA;
}

div.tooltip p{
color: #FFF;
background: #222;
padding: 5px 10px;
}

退会済みユーザー

2016/11/09 05:52

ツールチップが表示されないと言ってますか？　それとも、ツールチップは表示されるが JavaScript が期待通り動かないと言っていますか？　後者であれば、待した動きというのはどういうものでしょう？

del_57

2016/11/09 05:59

回答ありがとうございます。前者ですね。ツールチップが表示されません。画像の領域ごとでマウスオーバーをすると説明が表示されるというものを望んでいます。

kei344

2016/11/09 06:01

コードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

gin

2016/11/09 08:54

もし初心者さんの場合は初心者マークをつけたほうがいいですよ。ないとある程度分かってるものとしての回答になるので…

行動規範の内容に同意します

回答3件

前者ですね。ツールチップが表示されません。画像の領域ごとでマウスオーバーをすると説明が表示されるというものを望んでいます。

とすると、JavaScript のコードは何を意味するのでしょうか？その目的だけなら JavaScript は不要で、img, map, area 要素の設定だけで望むことができるはずなのですが・・・

ツールチップが表示されないのはブラウザの問題ということはありませんか？ちょっと前に MSDN フォーラムでそういう話を聞いたことがあります。

詳しい説明が以下の記事に出ていますので読んでください。実際に動くサンプルもありますので試してみてください。表示されなければブラウザの問題かと。

マップ <MAP> <AREA>
http://html.eweb-design.com/0603_map.html

投稿2016/11/09 07:03

退会済みユーザー

総合スコア0

del_57

2016/11/09 08:02

回答ありがとうございます。 javascriptはマウスオーバーに関しての記述をしたつもりなのですが無駄ですかね？？現在windows7を用いてるのですがブラウザの問題ではどうしようもないですかね？？

del_57

2016/11/09 08:06

また他のスクリプトで気になったとこなどありませんか？？

退会済みユーザー

2016/11/09 08:08

紹介した記事を読んでください。JavaScript / jQuery は一切使ってません。紹介した記事のサンプルのツールチップはあなたのブラウザで表示されますか？　表示されればブラウザの問題はなくて、あなたが書いた html ソースの問題ということになるかと思います。

del_57

2016/11/09 08:36

紹介していただいた記事のサンプルを開きましたが動きました。ということはやはり自分のソースに問題があるということですね、、、いろいろ試行錯誤して試しているのですが、、、

del_57

2016/11/09 08:38

http://onlineconsultant.jp/pukiwiki/?jQuery%20%E5%A4%A7%E3%81%8D%E3%81%AA%E5%9B%B3%E3%81%AB%E3%80%81%E9%83%A8%E5%88%86%E7%9A%84%E3%81%AB%E8%AA%AC%E6%98%8E%E3%82%92%E3%81%A4%E3%81%91%E3%82%8B こちらの方を参考にしてつくっているのですがどうも上手くいかないです、、、

gin

2016/11/09 08:52

ツールチップの質が違う気がします… SurferOnWwwさんの言われているツールチップはtitle属性を指定していれば通常ブラウザが勝手に出してくれるものです。 del_57さんの言われているツールチップはJSでtitle属性のテキストを取り込みhtmlのタグとして生成して表示するものです。ここに齟齬があるのでは…

退会済みユーザー

2016/11/09 11:13

参考にされている記事を拝見しました。誰かが作った jQuery プラグインを使ってツールチップ（のようなもの）を表示させるということのようですが、それが質問者さんのやりたいことなんでしょうか？　それとも、私が紹介した記事のようにツールチップが表示されればいいのでしょうか？

行動規範の内容に同意します