画像のホットスポットを使用し、マウスオーバーで近くに新たな画像を表示する方法

解決済

質問者：sleemans
質問日時：2009/02/05 05:30
回答数：2件

お世話になっております。

ドリームウェーバーで画像に設定可能なホットスポットでマウスオーバーを取得し、それに対応する写真画像を近くにポップアップ表示する方法を探しています。

Java Scriptでの方法になるような気がするのですが、Javaに関しても素人なので、自力では難しく、今回相談させていただきました。

処理の例をあげると、地図の画像があり、その画像上の地名にホットスポットを適用、その地名をマウスオーバーすると近くにその地名の写真画像がポップアップ表示というものが作りたいです。

画像場所を指定したスワップの方法は分かるのですが、地図サイズがが大きいためユーザーのウインドウサイズによって表示場所が見えなくなってしまうことを避けるのが目的です。

よろしくお願い致します。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： fujillin
回答日時：2009/02/06 19:16

No1です。

＞あくまでもドリームウェーバーの操作で対応できるということです。
ドリームウェーバーを使ったことがないので、そちらがどのような操作をしているのかわかりませんが、とりあえず自作で…

画像（img）のかわりに<div>を使用しています。
大きい面の中をクリックすると、その位置に小さな<div>が表示されるというものです。例では、onclickにしていますがonmouseoverでも同様です。
（ちょっと、遊んでたら長くなってしまいました。）

<html>
<style type="text/css">
#fuga { width:600; height:500; background-color:Honeydew;
border:2px solid gray; z-index=1;
position:absolute; top:50; left:50; }
#hoge { width:100; height:46; background-color:yellow;
padding:15px; text-align:center; font-weight:bold;
position:absolute; display:none; z-index=10; }
</style>
<script>
/*----------------------------*/
var is_ie, is_gecko, is_opera, is_safari, oValue, oElm, x, y;
/*--------ブラウザ判別---------*/
var agt=navigator.userAgent.toLowerCase();
is_ie = ((agt.indexOf("msie") != -1) && (agt.indexOf("opera") == -1));
is_gecko = (agt.indexOf('gecko') != -1);
var is_opera = (agt.indexOf("opera") != -1);
is_safari = (agt.indexOf("safari") != -1);
/*---------初期設定-----------*/
window.onload=function(){oElm=document.getElementById('hoge');}
/*---------表示処理-----------*/
function disp(e){
//マウス位置取得
if (is_ie || is_opera) {
x = event.x + document.body.scrollLeft;
y = event.y + document.body.scrollTop;
} else { x = e.pageX; y = e.pageY; }
//座標調整・表示・消去
x = x<102?102:( x>598?598:x );
y = y<75?75:( y>523?523:y );
oElm.style.top = y-23; oElm.style.left = x-50;
oElm.style.display = 'block';
oValue = 100; o2Zero();
}
/*----------透明化-----------*/
function o2Zero() {
if (oValue > 0) { oValue -= 2;
if (oElm && oValue) {
oElm.innerHTML=oValue>60?'んちゃ！':(oValue>40?'じゃ…':'またね');
if (is_ie) oElm.style.filter = 'alpha(opacity=' + oValue + ')';
if (is_opera || is_safari) oElm.style.opacity = oValue / 100;
if (is_gecko) oElm.style.MozOpacity = oValue / 100;
} else { oElm.style.display='none'; }
setTimeout('o2Zero()',35);
}
}
</script>
<body>
<div id="fuga" onclick="disp()">　これは画像のつもり</div>
<div id="hoge"></div>
</body>
</html>

- 0
- 件

通報する

この回答へのお礼

連絡が遅くなり、大変申し訳ありませんでした。
そして、とても丁寧な返答に感謝致します。
私のレベルでどこまでできるか分かりませんが、教えていただいた内容で挑戦してみたいと思います。
ありがとうございました。

通報する

お礼日時：2009/02/14 04:51

No.1

回答者： fujillin
回答日時：2009/02/05 09:49

＞画像場所を指定したスワップの方法は分かるのですが

ということなので、マウスの位置が取得できれれば後は問題ないようですので、以下がご参考になるでしょう。
　http://www.openspc2.org/JavaScript/Ajax/Ajax_stu …

この回答への補足

説明が悪かったようです。
画像場所を指定したスワップとは、ホットスポットを使い、決められた場所（画像名）をスワップイメージする方法が分かるというだけで、あくまでもドリームウェーバーの操作で対応できるということです。
（もちろんその位置のソースをいじることはできますが．．．．）

マウスオーバーの情報はホットスポットで取得し、その近くに画像を重ねる方法を探しています。

教えていただいたリンクでも可能なのかもしれませんが、少し難解で理解できませんでした。

補足日時：2009/02/05 15:11

通報する