マウスオーバーにて画像に虫眼鏡の画像を重ねる時のズレ

解決済

質問者：apelave
質問日時：2009/08/26 10:03
回答数：3件

こんにちわ。
現在、imagelink.jsといったJAVAを使って画像にマウスオーバーした時に任意の画像に別の画像を重ねて表示するといった事が出来るものを見つけたのですが、表を作成し画像を並べると、マウスオーバーした際に全く別の所に表示されてしまいます。
表を作らずそのまま画像を縦に並べるだけだと正常に動作するのですが。。。
またFireFoxだと大丈夫でInternetExpiorer8だと本来任意の画像に重なって表示されるはずが、まったく違う場所に表示されます。
これを回避する方法などあるのでしょうか？
以下デモページになります。
http://cssglobe.com/lab/imagelink/

通報する

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

質問の本文を隠す

回答 (3件)

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

No.1ベストアンサー

回答者： yyr446
回答日時：2009/08/26 16:02

表を作成し画像を並べると、マウスオーバーした際に全く別の所に表示されてしまうのを回避するのは、

に対しては、CSS定義で
p{margin:1em 0;}
img{border:none;
position:relative;}
のようにpタグの下のimgタグにposition:relative;
を指定すると出来ます。

InternetExpiorer8だと本来任意の画像に重なって表示されるはずが、まったく違う場所に表示されます。
＝＞IE8の非互換部分をチェックするしかないですね？

- 0
- 件

通報する

この回答へのお礼

お返事有難うございます。
大変助かりました。
無事ずれる事なく出来ました^^

通報する

お礼日時：2009/08/27 11:44

No.3

回答者： yuu_x
回答日時：2009/08/27 05:53

https://connect.microsoft.com/IE/feedback/ViewFe …

RC1 で直ってる？

--------------------------------------------------
imagelink.js
32 行目、position に static を指定してる辺りが怪しい。（#1 さんと同意見）

参考URL：https://connect.microsoft.com/IE/feedback/Search …

- 0
- 件

通報する

No.2

回答者： babu_baboo
回答日時：2009/08/26 16:36

つくってみた。

かこのけいけんからいうと、どっかにかならず、みすがあるじょ！
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<title>test</title>

<table border="1">
<tr><td><img src="./img/0.gif" id="img0" width="100" height="100"></td></tr>
<tr><td><img src="./img/1.gif" id="img1" width="100" height="100"></td></tr>
</table>
<script type="text/javascript">

//@cc_on

var OnMouseImager = { };

OnMouseImager.buffer = { };

OnMouseImager.add = (function () {
　return function (onImageId, newImageFile, newImageAlt, offsetX, offsetY) {
　　if ( undefined == onImageId ) return;
　　if ( ! this.buffer[ onImageId ] ) {
　　　var img = new Image, s = img.style;
　　　img.src = newImageFile;
　　　img.alt = newImageAlt || newImageFile;
　　　this.buffer[ onImageId ] = {'img': img, 'x':offsetX ||0, 'y':offsetY||0};
　　}
　};
})();

OnMouseImager.disp = (function (get) {
　var m;
　return function (id) {
　　var obj, tgt, psn;
　　if (! id && m) {
　　　m.style.display = 'none';
　　　m = null;
　　} else {
　　　obj = this.buffer[ id ];
　　　if ( ! obj ) return;
　　　tgt = document.getElementById( id );
　　　psn = get( tgt );
　　　m = this.img;
　　　m.src = obj.img.src;
　　　m.style.top = psn.y + obj.y +'px';
　　　m.style.left = psn.x + obj.x + 'px';
　　　m.style.display = 'inline';
　　}
　};
})(
　function (e) {
　　var x = 0, y = 0;
　　do {
　　　x += e.offsetLeft;
　　　y += e.offsetTop;
　　} while (e = e.offsetParent)
　　 return { 'x': x, 'y':y };
　}
);

OnMouseImager.Initializer = (function () {
　return function ( ) {
　　document./*@if (@_jscript)attachEvent('on'+ @else@*/addEventListener(/*@end@*/
　　　'mouseover', OnMouseImager.Listener, false);
　　this.img = document.createElement('img');
　　var p = document.createElement('p');
　　var s = this.img.style;
　　s.position = 'absolute';
　　s.display = 'none';
　　p.appendChild(this.img);
　　document.body.appendChild(p);
　};
})();

OnMouseImager.Listener = function ( evt ) {
　var e = evt./*@if (@_jscript) srcElement @else@*/ target /*@end@*/, o;
　OnMouseImager.disp(OnMouseImager.buffer[e.id] ? e.id: null);
};

//##########################

OnMouseImager.Initializer();//初期化　かならず必要
OnMouseImager.add('img0','./img/0.gif','a', 20, 20);//対象の画像ID,表示する画像,説明?,左からの位置,上からの位置
OnMouseImager.add('img1','./img/1.gif','b', 20,20);//あとは何個でも

</script>