- ベストアンサー
マウスオーバーにて画像に虫眼鏡の画像を重ねる時のズレ
こんにちわ。 現在、imagelink.jsといったJAVAを使って画像にマウスオーバーした時に任意の画像に別の画像を重ねて表示するといった事が出来るものを見つけたのですが、表を作成し画像を並べると、マウスオーバーした際に全く別の所に表示されてしまいます。 表を作らずそのまま画像を縦に並べるだけだと正常に動作するのですが。。。 またFireFoxだと大丈夫でInternetExpiorer8だと本来任意の画像に重なって表示されるはずが、まったく違う場所に表示されます。 これを回避する方法などあるのでしょうか？ 以下デモページになります。 http://cssglobe.com/lab/imagelink/
- apelave
- お礼率22% (10/45)
- JavaScript
- 回答数3
- ありがとう数2
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
表を作成し画像を並べると、マウスオーバーした際に全く別の所に表示されてしまうのを回避するのは、 に対しては、CSS定義で p{margin:1em 0;} img{border:none; position:relative;} のようにpタグの下のimgタグにposition:relative; を指定すると出来ます。 InternetExpiorer8だと本来任意の画像に重なって表示されるはずが、まったく違う場所に表示されます。 ＝＞IE8の非互換部分をチェックするしかないですね？
その他の回答 (2)
- yuu_x
- ベストアンサー率52% (106/202)
https://connect.microsoft.com/IE/feedback/ViewFeedback.aspx?FeedbackID=339765 RC1 で直ってる？ -------------------------------------------------- imagelink.js 32 行目、position に static を指定してる辺りが怪しい。（#1 さんと同意見）
- babu_baboo
- ベストアンサー率51% (268/525)
つくってみた。かこのけいけんからいうと、どっかにかならず、みすがあるじょ！ <!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>
お礼
お返事、ありがとうございます。 スタイルシートで回避できましたが勉強させて頂きます。 お手間お掛けしました。有難うございました。
お礼
お返事有難うございます。 大変助かりました。 無事ずれる事なく出来ました^^