\r\n\r\n\r\n\r\n\r\nバーチャルレジストレーション-トップページ-\r\n\r\n\r\n\r\n
\r\n

\r\n\"\"バーチャルレジストレーション\r\n

\r\n\r\n\r\n
\r\n\r\n

\r\nバーチャルレジストレーション

\r\n
\r\n
\r\n\r\n

国際10-20法

\r\n\r\n\r\n\r\n\r\n \"G\"眉と眉の間\"/>\r\n\r\n\r\n\r\n
\r\n\r\n\r\n\r\njavascript\r\nfunction simple_tooltip(target_items, name){ \r\n $(target_items).each(function(i){ \r\n $(\"body\").append(\"

\"+$(this).attr('title')+\"

\"); \r\n var my_tooltip = $(\"#\"+name+i); \r\n \r\n if($(this).attr(\"title\") != \"\" && $(this).attr(\"title\") != \"undefined\" ){ \r\n \r\n $(this).removeAttr(\"title\").mouseover(function(){ \r\n my_tooltip.css({opacity:0.8, display:\"none\"}).fadeIn(400); \r\n }).mousemove(function(kmouse){ \r\n var border_top = $(window).scrollTop(); \r\n var border_right = $(window).width(); \r\n var left_pos; \r\n var top_pos; \r\n var offset = 20; \r\n if(border_right - (offset *2) >= my_tooltip.width() + kmouse.pageX){ \r\n left_pos = kmouse.pageX+offset; \r\n } else{ \r\n left_pos = border_right-my_tooltip.width()-offset; \r\n } \r\n \r\n if(border_top + (offset *2)>= kmouse.pageY - my_tooltip.height()){ \r\n top_pos = border_top +offset; \r\n } else{ \r\n top_pos = kmouse.pageY-my_tooltip.height()-offset; \r\n } \r\n \r\n \r\n my_tooltip.css({left:left_pos, top:top_pos}); \r\n }).mouseout(function(){ \r\n my_tooltip.css({left:\"-9999px\"}); \r\n }); \r\n \r\n } \r\n \r\n }); \r\n} \r\n \r\n \r\n$(document).ready(function(){ \r\n simple_tooltip(\"area\",\"tooltip\"); \r\n}); \r\n\r\ncss\r\ndiv.tooltip { \r\n width: 250px; \r\n position: absolute; \r\n left: -9999px; \r\n background: #EEE; \r\n padding: 5px; \r\n border: 1px solid #AAA; \r\n } \r\n \r\ndiv.tooltip p{ \r\n color: #FFF; \r\n background: #222; \r\n padding: 5px 10px; \r\n }","answerCount":3,"upvoteCount":0,"datePublished":"2016-11-09T05:22:51.693Z","dateModified":"2022-01-12T10:55:45.698Z","suggestedAnswer":[{"@type":"Answer","text":"**動くサンプル：**[https://jsfiddle.net/cvhk1sfz/1/](https://jsfiddle.net/cvhk1sfz/1/)\r\n\r\n円が小さいので探せないだけ、とかではないですか？上記サンプルでは「350」の左上あたりがクリックポイントになるはずです。\r\n\r\nまた、title内の文字列に
を入れてもそのまま `
` と表示されます。その部分には改行が使えなかったような気がします。\r\n\r\n---\r\n\r\n**追記：**\r\n\r\nスクリプトがあったんですね、見逃していました。それも問題なく動きます。\r\n\r\n**動くサンプル：**[https://jsfiddle.net/cvhk1sfz/2/](https://jsfiddle.net/cvhk1sfz/2/)","dateModified":"2016-11-09T08:58:43.128Z","datePublished":"2016-11-09T08:49:25.730Z","upvoteCount":1,"url":"https://teratail.com/questions/54520#reply-87423","comment":[]},{"@type":"Answer","text":"気になったことといえば\r\nsrc=\"脳logo2.jpg\" \r\nこの部分ですが、表示されない場合があるので日本語を英語にした方がいいです。","dateModified":"2016-11-09T08:19:33.629Z","datePublished":"2016-11-09T08:19:33.629Z","upvoteCount":0,"url":"https://teratail.com/questions/54520#reply-87412","comment":[]},{"@type":"Answer","text":"> 前者ですね。ツールチップが表示されません。画像の領域ごとでマウスオーバーをすると説明が表示されるというものを望んでいます。\r\n\r\nとすると、JavaScript のコードは何を意味するのでしょうか？ その目的だけなら JavaScript は不要で、img, map, area 要素の設定だけで望むことができるはずなのですが・・・\r\n\r\nツールチップが表示されないのはブラウザの問題ということはありませんか？ ちょっと前に MSDN フォーラムでそういう話を聞いたことがあります。\r\n \r\n詳しい説明が以下の記事に出ていますので読んでください。実際に動くサンプルもありますので試してみてください。表示されなければブラウザの問題かと。\r\n \r\nマップ \r\nhttp://html.eweb-design.com/0603_map.html","dateModified":"2016-11-09T07:03:31.587Z","datePublished":"2016-11-09T07:03:31.587Z","upvoteCount":2,"url":"https://teratail.com/questions/54520#reply-87376","comment":[{"@type":"Comment","text":"回答ありがとうございます。\r\njavascriptはマウスオーバーに関しての記述をしたつもりなのですが無駄ですかね？？\r\n現在windows7を用いてるのですがブラウザの問題ではどうしようもないですかね？？","datePublished":"2016-11-09T08:02:51.443Z","dateModified":"2016-11-09T08:02:51.443Z"},{"@type":"Comment","text":"また他のスクリプトで気になったとこなどありませんか？？","datePublished":"2016-11-09T08:06:00.661Z","dateModified":"2016-11-09T08:06:00.661Z"},{"@type":"Comment","text":"紹介した記事を読んでください。JavaScript / jQuery は一切使ってません。紹介した記事のサンプルのツールチップはあなたのブラウザで表示されますか？　表示されればブラウザの問題はなくて、あなたが書いた html ソースの問題ということになるかと思います。","datePublished":"2016-11-09T08:08:25.642Z","dateModified":"2016-11-09T08:08:25.642Z"},{"@type":"Comment","text":"紹介していただいた記事のサンプルを開きましたが動きました。ということはやはり自分のソースに問題があるということですね、、、\r\nいろいろ試行錯誤して試しているのですが、、、","datePublished":"2016-11-09T08:36:17.756Z","dateModified":"2016-11-09T08:36:17.756Z"},{"@type":"Comment","text":"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\r\nこちらの方を参考にしてつくっているのですがどうも上手くいかないです、、、","datePublished":"2016-11-09T08:38:08.928Z","dateModified":"2016-11-09T08:38:08.928Z"},{"@type":"Comment","text":"ツールチップの質が違う気がします…\r\nSurferOnWwwさんの言われているツールチップはtitle属性を指定していれば通常ブラウザが勝手に出してくれるものです。\r\ndel_57さんの言われているツールチップはJSでtitle属性のテキストを取り込みhtmlのタグとして生成して表示するものです。\r\nここに齟齬があるのでは…","datePublished":"2016-11-09T08:52:11.690Z","dateModified":"2016-11-09T08:52:11.690Z"},{"@type":"Comment","text":"参考にされている記事を拝見しました。誰かが作った jQuery プラグインを使ってツールチップ（のようなもの）を表示させるということのようですが、それが質問者さんのやりたいことなんでしょうか？　それとも、私が紹介した記事のようにツールチップが表示されればいいのでしょうか？","datePublished":"2016-11-09T11:13:40.914Z","dateModified":"2016-11-09T11:13:40.914Z"}]}],"breadcrumb":{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"https://teratail.com","name":"トップ"}},{"@type":"ListItem","position":2,"item":{"@id":"https://teratail.com/tags/HTML5","name":"HTML5に関する質問"}},{"@type":"ListItem","position":3,"item":{"@id":"https://teratail.com/questions/54520","name":"大きな画像に部分的な説明をつけたい"}}]}}}
teratail
回答率
85.29%
質問するログイン新規登録
トップHTML5に関する質問大きな画像に部分的な説明をつけたい

Q&A

3回答

2310閲覧

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

del_57
del_57

総合スコア8

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述･作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像･リスト･表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

1クリップ

投稿2016/11/09 05:22

0

1

一つの画像にマウスオーバーすることによって部分的に説明がポップアップ表示されることを目指しています。
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;
}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2016/11/09 05:52

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

2016/11/09 05:59

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

2016/11/09 06:01

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

2016/11/09 08:54

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

回答3件

0

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

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

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

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

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

投稿2016/11/09 07:03

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

del_57
del_57

2016/11/09 08:02

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

2016/11/09 08:06

また他のスクリプトで気になったとこなどありませんか？？
退会済みユーザー

退会済みユーザー

2016/11/09 08:08

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

2016/11/09 08:36

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

2016/11/09 08:52

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

退会済みユーザー

2016/11/09 11:13

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

0

動くサンプル：https://jsfiddle.net/cvhk1sfz/1/

円が小さいので探せないだけ、とかではないですか？上記サンプルでは「350」の左上あたりがクリックポイントになるはずです。

また、title内の文字列に<br>を入れてもそのまま <br> と表示されます。その部分には改行が使えなかったような気がします。

追記：

スクリプトがあったんですね、見逃していました。それも問題なく動きます。

動くサンプル：https://jsfiddle.net/cvhk1sfz/2/

投稿2016/11/09 08:49

編集2016/11/09 08:58
kei344
kei344

総合スコア69643

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

気になったことといえば
src="脳logo2.jpg"
この部分ですが、表示されない場合があるので日本語を英語にした方がいいです。

投稿2016/11/09 08:19

date
date

総合スコア1820

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.29%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

トップHTML5に関する質問

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