人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

クリッカブルマップのリンク先を別ウィンドウで開く物を作成しました。
<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でも両方使っても構いませんので、ここに書いたソースに変更を加えて吹き出しを実現出来るものを教えていただければと思います。

●質問者: quocard
●カテゴリ:インターネット ウェブ制作
✍キーワード:Area CSS JavaScript open ウィンドウ
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● Cherenkov
●60ポイント

はじめに


サンプル

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

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

BeautyTips Demo Page



<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のカスタマイズは


おわりに

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

他にも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>
◎質問者からの返答

ありがとうございます。

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ