クリッカブルマップのリンク先を別ウィンドウで開く物を作成しました。

<html>
<head>
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<script language="javascript">
function open_newwin(set_url,xx,yy)
{window.open(set_url, 'subwindow','width='+xx+',height='+yy+',resizable=1');}
</script>
</head>
<body>
<img src="./sample.jpg" alt="sample" usemap="#sample" />
<map name="sample" id="sample">
<area shape="rect" coords="50,50,100,100" href="JavaScript:open_newwin('./sample.html',width=100,height=100)" alt="sample" title="hensu01" />
</map>
</body>
</html>
リンク部分にマウスオーバーした時に吹き出しを付けたいと思っております。
条件として下記があります。
 areaのtitleに"hensu01"と付けてますがここには本来の変数が入るようになっております。他の部分でもtitleに変数が入っているので、ページ全体でtitleを使用するような吹き出しは使用できません。
http://web-graphics.com/mtarchive/001717.phpを参考にしてみたのですがtitleの文字を引っ張ってくるらしく私の環境では使用できませんでした。
CSSでもjavascriptでも両方使っても構いませんので、ここに書いたソースに変更を加えて吹き出しを実現出来るものを教えていただければと思います。

回答の条件
  • 1人3回まで
  • 登録:2009/12/20 11:08:00
  • 終了:2009/12/23 04:54:04

回答(1件)

id:Cherenkov No.1

Cherenkov回答回数1502ベストアンサー獲得回数4922009/12/21 00:19:38

ポイント60pt

はじめに

  • コメント欄は有効にしておきましょう。
  • 「クリッカブルマップのリンク先を別ウィンドウで開く」かつ「マウスオーバーした時に吹き出し(tooltip)を付けたい」でよろしいですかね。何をしたいのか仕様を整理してから質問してください。
  • htmlタグのtitle属性とJavaScriptの変数titleは別物です。
  • tooltip、ballonのライブラリの多くはaタグしか対象にしてないように思われます。なので今回のようにイメージマッピングにballonを表示する場合は多少なりともソースを読んで確認する必要があります。
  • HTML SandBox 下のHTMLをこちらのサイトに貼りつければ素早く確認することができます。

サンプル

Bubble Tooltipsはイメージマッピングに対応していないので一旦忘れて、

"BeautyTips"というjQuery Pluginを使ってballonをやってみました。

BeautyTips Demo Page


  • 別ウィンドウで開くのはwindow.openではなく、areaタグにtarget="_blank"をつけて対応しました。
  • サンプルの為に他のサーバにあるjsを使っていますがお行儀が悪いので運用の際はダウンロードしたものを使って下さい。

<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://www.lullabot.com/files/bt/bt-latest/jquery.bt.min.js"></script>
<script type="text/javascript">
$(function(){
  $('#g').bt({
    width: 'auto',
    shadow: true,
    positions: 'top',
    strokeStyle: 'red',
    fill: 'pink'
  });
  $('#oo').bt({
    width: 'auto',
    shadow: true,
    positions: 'bottom',
    strokeWidth: 2,
    strokeStyle: '#778899',
    fill: '#B0C4DE'
  });
  $('#gle').bt('areaタグのtitle属性ではなく、こちらに書いてもいける。', {
    width: '250px'
  });
});
</script>
</head>
<body>
<br><br><br><br>
<img src="http://www.google.co.jp/intl/ja_jp/images/logo.gif" usemap="#sample" />
<map name="sample">
<area shape="rect" coords="0,10,70,85" href="http://q.hatena.ne.jp/1261274879" title="ggggggggggggg" target="_blank" id="g"/>
<area shape="rect" coords="70,30,165,80" href="http://q.hatena.ne.jp/1261274879" title="ooooooooooooo" target="_blank" id="oo"/>
<area shape="rect" coords="165,8,270,100" href="http://q.hatena.ne.jp/1261274879" target="_blank" id="gle"/>
</map>
</body>
</html>

ballonのカスタマイズは

  • BeautyTips Demo Page ここのサンプルをよく読む。
  • BeautyTips | jQuery Plugins ここのZIPをダウンロード&解凍して「jquery.bt.js」のソースの一番下にデフォルトの値が説明されているので、それを参考に弄ってみる。

おわりに

イメージしたものと違うとは思いますが、発想次第でどうにでもなります。柔軟に考えてみて下さい。

他にもcssだけでtooltip(吹き出し)を表現する方法もあります。css tooltip - Google 検索

今回はjQueryを使ったほうがパワフルかつフレキシブルにいろいろできるのではと思い、このような提案にさせていただきました。


参考


関連



以下、"BubbleTooltips.js"の正しい使い方:


BubbleTooltips.jsのソースを読むと

document.getElementById(id).getElementsByTagName("a");

となっていて、aタグにのみ吹き出しをつけます。

つまりイメージマッピング(map,areaタグ)に対応していないのでうまくいかなかったのでしょう。


enableTooltips("google")で吹き出しをつけるidを指定できますが、いちいちaタグをdivかspanに入れてidを設定する必要がありめんどくさいですね。

BubbleTooltips.jsでaタグに吹き出しを作りたいのなら以下でできます。


<html>
<head>
<script type="text/javascript" src="http://web-graphics.com/mtarchive/BubbleTooltips.js">
</script>
<script type="text/javascript">
window.onload=function(){enableTooltips("google")};
</script>
<style type="text/css">
.tooltip{
width: 200px; color:#000;
font:lighter 11px/1.3 Arial,sans-serif;
text-decoration:none;text-align:center}

.tooltip span.top{padding: 30px 8px 0;
    background: url(http://web-graphics.com/mtarchive/bt.gif) no-repeat top}

.tooltip b.bottom{padding:3px 8px 15px;color: #548912;
    background: url(http://web-graphics.com/mtarchive/bt.gif) no-repeat bottom}
</style>
</head>
<body>
<span id="google">
<a href="http://www.google.co.jp" title="web search"  target="_blank">google</a>
</span>
</body>
</html>
id:quocard

ありがとうございます。

こちらを参考に作成することができました。

2009/12/23 04:53:40

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません