- ベストアンサー
サムネイル画像をオンマウスで拡大表示してリンクを指定する方法
- JavaScript初心者の方に向けて、サムネイル画像をオンマウスで拡大表示させる方法と、サムネイル画像と拡大表示画像の両方にリンクを指定する方法について解説します。
- フリーソースを応用することで実現する方法です。
- リンク先を別ウィンドウで開く方法も紹介します。
- nice36
- お礼率50% (2/4)
- JavaScript
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>TEST</title> <style type="text/css"> .smlimg { width:120px; height:80px; } #bigimg { width:600px; height:400px; } #a { width:600px; height:100px; overflow:auto; } </style> <div><img src="" id="bigimg"></div> <div id="a"><div id="b"></div></div> <script type="text/javascript"> //@cc_on var simage = 'p0.jpg p1.jpg p2.jpg p3.jpg p4.jpg p5.jpg'.split(' '); var bimage = 'p0.jpg p1.jpg p2.jpg p3.jpg p4.jpg p5.jpg'.split(' '); var jmpurl = 'htp:/test.xxx0.com htp:/test.xxx1.com htp:/test.xxx2.com htp:/test.xxx3.com htp:/test.xxx4.com htp:/test.xxx5.com '.split(' '); var bufimg = []; addEvent( window, 'load', init); addEvent( 'b', 'mouseover', chgimg ); addEvent( document.body, 'click', chgurl ); function init(){ var w=0,r = Math.random()*i|0,image,p; for(var i in simage){ bufimg[i] = new Image; bufimg[i].src = bimage[i]; image = document.createElement('img'); with( image ){ src = simage[i]; alt = bimage[i];title = jmpurl[i]; className = 'smlimg'; } p = document.getElementById('b').appendChild( image ); w+=p.offsetWidth; } document.getElementById('b').style.width=w+'px'; setbimg( bufimg[r].src, jmpurl[r] ); } function chgimg( evt ){ var obj = evt.target || evt.srcElement; if( obj.className && obj.className == 'smlimg') setbimg( obj.alt, obj.title ); } function chgurl( evt ){ var obj = evt.target || evt.srcElement; if( obj.className == 'smlimg' || obj.id == 'bigimg' ) window.open( obj.title ); } function setbimg(s,t){with( document.getElementById('bigimg')){src=alt=s;title=t}} function addEvent(elementId, evt, eventHandler, flag){ var element = ( typeof( elementId ) == 'string' )? document.getElementById( elementId ): elementId; element./*@if(1)attachEvent('on'+ @else @*/addEventListener(/*@end@*/evt, eventHandler, flag); } </script>
その他の回答 (1)
こんな書き方は駄目だと思っていますが、そういう例ということで・・。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>TEST</title> <style type="text/css"> .smlimg { width:120px; height:80px; } #bigimg { width:600px; height:400px; } #a { width:600px; height:100px; overflow:auto; } </style> <div><img src="" id="bigimg"></div> <div id="a"><div id="b"></div></div> <script type="text/javascript"> //@cc_on var simage = 'p0.jpg p1.jpg p2.jpg p3.jpg p4.jpg p5.jpg'.split(' '); var bimage = 'p0.jpg p1.jpg p2.jpg p3.jpg p4.jpg p5.jpg'.split(' '); var jmpurl = 'htp:/test.xxx0.com htp:/test.xxx1.com htp:/test.xxx2.com htp:/test.xxx3.com htp:/test.xxx4.com htp:/test.xxx5.com '.split(' '); var bufimg = []; addEvent( window, 'load', init); addEvent( 'b', 'mouseover', chgimg ); addEvent( document.body, 'click', chgurl ); function init(){ var w=0; for(var i in simage){ bufimg[i] = new Image; bufimg[i].src = bimage[i]; var image = document.createElement('img'); with( image ){ src = simage[i]; alt = bimage[i];title = jmpurl[i]; className = 'smlimg'; } var p = document.getElementById('b').appendChild( image ); w+=p.offsetWidth; } document.getElementById('b').style.width=w+'px'; var r = Math.random()*i|0; setbimg( bufimg[r].src, jmpurl[r] ); } function chgimg( evt ){ var obj = evt.target || evt.srcElement; if( obj.className && obj.className == 'smlimg') setbimg( obj.alt, obj.title ); } function chgurl( evt ){ var obj = evt.target || evt.srcElement; if( obj.className == 'smlimg' || obj.id == 'bigimg' ) window.open( obj.title ); } function setbimg(s,t){with( document.getElementById('bigimg')){alt=s;title=t}; changeImage('bigimg',s,5,20);} function addEvent(elementId, evt, eventHandler, flag){ var element = ( typeof( elementId ) == 'string' )? document.getElementById( elementId ): elementId; element./*@if(1)attachEvent('on'+ @else @*/addEventListener(/*@end@*/evt, eventHandler, flag); } var ff=0; function changeImage( elementId, imgsrc, step, wtime ){ this.setOpacity = function(n){ this.opacity = n; this.obj.style./*@cc_on @if(1) filter = 'alpha(opacity='+ this.opacity+ ')'; @else @*/ MozOpacity = this.obj.style.opacity = this.opacity / 100;/*@end@*/ } this.go = function(){ var f=0; this.setOpacity( this.opacity += this.step ); if( this.opacity<0 || this.opacity>100 ) { clearInterval( this.tmid ); this.obj.parentNode.removeChild( this.obj ); ff=0; } } if(ff) return; ff=1; var tobj = ( typeof( elementId ) == 'string' )? document.getElementById( elementId ): elementId; tobj.style.position='absolute'; var wrap = document.createElement( 'img' ); wrap.src = tobj.src; wrap.style.top = tobj.offsetTop +'px'; wrap.style.left = tobj.offsetLeft +'px'; wrap.style.width = tobj.offsetWidth +'px'; wrap.style.height = tobj.offsetHeight +'px'; wrap.style.position = 'absolute'; tobj.style.position=''; this.obj = document.body.appendChild( wrap ); tobj.src = imgsrc; this.setOpacity( 100 ); this.step = -step; this.tmid = setInterval((function(f_){ return function(){ f_.go.call(f_);}})(this), wtime); } </script>
お礼
昨日書き込み頂いた内容がメールで通知されず、 お礼が遅くなりました。 ご回答頂きありがとうございます。 お昼頃に上記内容をテストして正常に動作して感涙しておりますTT 知りえない記述が多く、何がどう、とお答えできませんが、 私の意図した動作そのものでした。 _pipi_さんのソースを解析するところから始めたいと思います。 本当にありがとうございました！！ 勉強させて頂きます。 今後ともよろしくお願いいたしますｍ(_ _)ｍ