- ベストアンサー
画像のランダムチェンジとフェードイン効果
質問ですが、まず最初に失礼がありましたらお許し下さい。 http://oshiete1.goo.ne.jp/qa3495988.html での質問に関連していると思うので、例を引用させて頂きます。 横590px縦300のメイン画像があり、その横に横180px縦50pxの画像を６個にしての設置を行います。横の180px縦50px画像をロールオーバーにし、更にその画像にマウスを乗せた時に横590px縦300pxのメイン画像も同時に変えたい・・ ここまでは回答で納得したのですが、メイン画像を一定時間でランダムチェンジさせる事とメイン画像の変化時にフェードイン効果を与える事の２点に挌闘しています。過去の質問ログを全部調べましたが、ないものですね。 <html> <head> <title></title> <style type="text/css"> img{border:1px solid red;} #box0 { width:770px; height:300px; position:relative; } #box mainview{ position:absolute; top:0;left:0; } #box0 ul{ position:absolute; top:0;left:590px; list-style-type:none; margin:0; padding:0; } #box0 li{ margin:0; padding:0; } #box0 li img{ vertical-align:top; } </style> <script type="text/javascript"> function sample(obj,mode){ var images = obj.getElementsByTagName('img'); images[0].style.display = (mode)?'none':'inline'; images[1].style.display = (mode)?'inline':'none'; var idNo = images[0].id.match(/(\d)/); for(var x=document.getElementById('mainview').firstChild; x;x=x.nextSibling){ if(x.id){ if(!mode && x.id.match(/0/) || mode && x.id.match(idNo[1])) x.style.display = 'inline'; else x.style.display = 'none'; } } } </script> </head> <body> <div id="box0"> <span id="mainview"> <img src="xxx0" width="590" height="180" alt="xxx0" id="xxx0"> <img src="xxx1" width="590" height="180" alt="xxx1" id="xxx1" style="display:none;"> <img src="xxx2" width="590" height="180" alt="xxx2" id="xxx2" style="display:none;"> <img src="xxx3" width="590" height="180" alt="xxx3" id="xxx3" style="display:none;"> <img src="xxx4" width="590" height="180" alt="xxx4" id="xxx4" style="display:none;"> <img src="xxx5" width="590" height="180" alt="xxx5" id="xxx5" style="display:none;"> <img src="xxx6" width="590" height="180" alt="xxx6" id="xxx6" style="display:none;"> </span> <ul> <li onmouseover="sample(this,true)" onmouseout="sample(this,false)"> <a href=""><img src="yyy1" width="180" height="50" alt="yyy1" id="yyy1"><img src="zzz1" width="180" height="50" alt="zzz1" id="zzz1" style="display:none"></a></li> <li onmouseover="sample(this,true)" onmouseout="sample(this,false)"> <a href=""><img src="yyy2" width="180" height="50" alt="yyy2" id="yyy2"><img src="zzz2" width="180" height="50" alt="zzz2" id="zzz2" style="display:none"></a></li> <li onmouseover="sample(this,true)" onmouseout="sample(this,false)"> <a href=""><img src="yyy3" width="180" height="50" alt="yyy3" id="yyy3"><img src="zzz3" width="180" height="50" alt="zzz3" id="zzz3" style="display:none"></a></li> <li onmouseover="sample(this,true)" onmouseout="sample(this,false)"> <a href=""><img src="yyy4" width="180" height="50" alt="yyy4" id="yyy4"><img src="zzz4" width="180" height="50" alt="zzz4" id="zzz4" style="display:none"></a></li> <li onmouseover="sample(this,true)" onmouseout="sample(this,false)"> <a href=""><img src="yyy5" width="180" height="50" alt="yyy5" id="yyy5"><img src="zzz5" width="180" height="50" alt="zzz5" id="zzz5" style="display:none"></a></li> <li onmouseover="sample(this,true)" onmouseout="sample(this,false)"> <a href=""><img src="yyy6" width="180" height="50" alt="yyy6" id="yyy6"><img src="zzz6" width="180" height="50" alt="zzz6" id="zzz6" style="display:none"></a></li> </ul> </div> </body> </html> の中に何を追加すれば・・・ ご教授の程よろしくお願いします。
- aikaj127
- お礼率14% (2/14)
- JavaScript
- 回答数8
- ありがとう数1
- みんなの回答 （8）
- 専門家の回答
質問者が選んだベストアンサー
とちゅうけいかです。おもったよりめんどうだね～やっぱり・・。 fujillinさんのように、みじかくかければよいのですが、むりっぽ。 ひととおりできたら、おなじような、きのうをまとめれば、たしょう みじかくなるかも？ ぜんかくくうはくは、はんかくに。 （でも、なにげに、どういつじんぶつだよね！） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>TEST</title> <style type="text/css"> #MainMenu { width :680px; height: 300px; overflow:auto; } #MainMenu ul { float :left; list-style: none; overflow : auto; margin : 0; padding : 0; height : 300px; } #MainView { width : 500px; } #MainView li { margin : 0; padding : 0; height : 300px; } #MainView li img { width:500px; height:300px; border : 0px none; } #ItemList { list-style: none; width : 180px; } #ItemList li { width : 180px; height: 50px; } #ItemList li a { width : 180px; height: 50px; } #ItemList li a img { width : 180px; height: 50px; border: 0px none; } </style> </head> <body> <div id="MainMenu"> <ul id="MainView"> <li><img src="./img/0.gif" alt="xxx0"> <li><img src="./img/1.gif" alt="xxx1"> <li><img src="./img/2.gif" alt="xxx2"> <li><img src="./img/3.gif" alt="xxx3"> <li><img src="./img/4.gif" alt="xxx4"> <li><img src="./img/5.gif" alt="xxx5"> <li><img src="./img/6.gif" alt="xxx6"> </ul> <ul id="ItemList"> <li> <a href="#"> <img src="./img/y0.gif" alt="yyy0"> </a> <li> <a href="#"> <img src="./img/y1.gif" alt="yyy1"> </a> <li> <a href="#"> <img src="./img/y2.gif" alt="yyy2"> </a> <li> <a href="#"> <img src="./img/y3.gif" alt="yyy3"> </a> <li> <a href="#"> <img src="./img/y4.gif" alt="yyy4"> </a> <li> <a href="#"> <img src="./img/y5.gif" alt="yyy5"> </a> <li> <a href="#"> <img src="./img/y6.gif" alt="yyy6"> </a> </ul> </div> <script type="text/javascript"> //@cc_on var Locater = function ( x, y, a ) { if( 'number' === typeof x ) this.left = (x|0) + 'px'; if( 'number' === typeof y ) this.top = (y|0) + 'px'; if( 'number' === typeof a ) { this./*@if( @_jscript ) filter = 'alpha(opacity='+ a +')' @else@*/ opacity = ( a / 100 ) + '' /*@end@*/; } }; //__________ var AutoChanger = function () { this.init.apply( this, arguments ); }; AutoChanger.prototype.init = function ( targetId, interval, step, interval2 ) { var cnt = 0, o, s, e; if( this.e = e = document.getElementById( targetId ) ) { e.style.overflow = 'hidden'; e.style.position = 'relative'; this.interval = interval || 3000; this.step = step || 20; this.interval2 = interval2 || 50; this.timerId0 = null; this.timerId1 = null; this.o = 100 / this.step; this.sx = [ 0, e.clientWidth, 0, -e.clientWidth ]; this.sy = [ -e.clientHeight, 0, e.clientHeight, 0 ]; this.li = [ ]; this.pt = 0; while( o = e.childNodes[ cnt ] ) { if( 1 == o.nodeType && 'LI' === o.nodeName ) { s = o.style; s.position = 'absolute';// Locater.call( s, 0, 0, 100) cnt++; this.li.push( o ); } else e.removeChild( o ); } this.target = e.firstChild; this.wait(); } }; AutoChanger.prototype.wait = function() { this.timerId0 = setTimeout( (function ( that ) { return function ( ) { that.change(); }; })( this ), this.interval ); }; AutoChanger.prototype.change = function ( n, r ) { this.stop(); Locater.call( this.target.style, 0, 0, 100 ); r = 'undefined' === typeof r ? Math.floor( Math.random() * 4 ): r % 4; this.x = this.sx[ r ]; this.y = this.sy[ r ]; this.vx = -this.x / this.step; this.vy = -this.y / this.step; this.cnt = this.step; this.op = 0; this.pt =( ( 'number' === typeof n ) ? n: this.pt + 1 ) % this.li.length; this.target = this.li[ this.pt ]; Locater.call( this.target.style, this.x, this.y, this.op ); this.e.appendChild( this.target ); this.start(); }; AutoChanger.prototype.start = function ( ) { this.timerId1 = setInterval( (function ( that ) { return function ( ) { that.x += that.vx, that.y += that.vy, that.op += that.o; Locater.call( that.target.style, that.x, that.y, that.op ); if( --that.cnt == 0 ) that.stop(), that.wait(); }; })( this ), this.interval2 ); }; AutoChanger.prototype.stop = function ( ) { this.timerId0 && clearTimeout( this.timerId0 ); this.timerId0 = null; this.timerId1 && clearInterval( this.timerId1 ); this.timerId1 = null; }; //__________ var ItemListRoller = function ( ) { this.init.apply( this, arguments ); }; ItemListRoller.prototype.init = function ( targetId, step, interval ) { var e = document.getElementById( targetId ); var cnt, o, s, h = 0; if( 'UL' != e.nodeName ) return false; e.style.overflow = 'hidden'; e.style.position = 'relative'; this.e = e; this.step = step || 2; this.interval = interval || 40; this.timerId = null; for( cnt = 0; o = e.childNodes[ cnt ]; ) { if( 1 == o.nodeType && 'LI' === o.nodeName ) { s = o.style; s.position = 'absolute'; s.top = h + 'px'; cnt++; h += o.offsetHeight; } else e.removeChild( o ); } this.max = h; this.lis = e.childNodes; this.start(); }; ItemListRoller.prototype.start = function ( ) { this.timerId = setInterval( (function ( that ) { return function ( ) { that.roll(); }; })( this ), this.interval ); }; ItemListRoller.prototype.stop = function ( ) { this.timerId && clearInterval( this.timerId ); this.timerId = null; }; ItemListRoller.prototype.roll = function ( ) { var cnt = 0; var li; var s; var h; while( li = this.lis[ cnt++ ] ) { s = li.style; h = parseInt( s.top, 10) - this.step; if( -li.offsetHeight >= h ) h = this.max - li.offsetHeight; s.top = h + 'px'; } }; ItemListRoller.Listener = (function ( getParent, getCount ) { var m, n; return function ( evt ) { var e = evt./*@if( @_jscript ) srcElement @else@*/ target /*@end@*/; var p = getParent( e, 'nodeName', 'UL' ); if( !p || !this.memory[ p.id ]) { if( m ) m.obj.start(); m = null; return; } var c; var changer; if( p && (m = changer = this.memory[ p.id ]) ) { c = getCount( getParent( e, 'nodeName', 'LI' ) ); changer.obj.stop(); if(c>=0) changer.cbFunc.call( changer.cbObj, c ); } }; })( function ( node, type, val ) { return node ? (val == node[type]) ? node: arguments.callee( node.parentNode, type, val ): null; }, function ( node ) { var cnt = -1, n; if( node ) { cnt = 0; n = node.nodeName; while( node = node.previousSibling ) if( n == node.nodeName ) cnt++; } return cnt; } ); ItemListRoller.memory = [ ]; ItemListRoller.Initializer = function ( ) { document./*@if( @_jscript ) attachEvent( 'on' + @else@*/ addEventListener( /*@end@*/ 'mouseover', function (e) { ItemListRoller.Listener(e); }, false ); }; ItemListRoller.add = function ( targetUL, step, interval, cbFunc, cbObj ) { var e = document.getElementById( targetUL ); var o; if( 1 != e.nodeType || 'UL' !== e.nodeName ) return; if( ! this.memory[ targetUL ] ) { o = new this( targetUL, step, interval ); } this.memory[ targetUL ] = { 'id': targetUL, 'cbFunc': cbFunc, 'cbObj': cbObj, 'obj': o }; }; //__________ var ac = new AutoChanger( 'MainView' ); ItemListRoller.Initializer( ); ItemListRoller.add( 'ItemList', 1, 60, ac.change, ac ); </script> </body> </html>
その他の回答 (7)
- babu_baboo
- ベストアンサー率51% (268/525)
どっかに、たくさん、おとしあながありそう。 ふかが100％かかりそうで、やっぱりこういうのは、 「うごく」と「つかえる」かは、べつものだね^^; <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>TEST</title> <style type="text/css"> #MainMenu { width :680px; height: 300px; overflow:auto; } #MainMenu ul { float :left; list-style: none; overflow : auto; margin : 0; padding : 0; height : 300px; } #MainView { width : 500px; } #MainView li { margin : 0; padding : 0; height : 300px; } #MainView li img { width:500px; height:300px; border : 0px none; } #ItemList { list-style: none; width : 180px; } #ItemList li { width : 180px; height: 50px; } #ItemList li a { width : 180px; height: 50px; border :0px none; } #ItemList li a img { width : 180px; height: 50px; border: 0px none; } </style> <body> <div id="MainMenu"> <ul id="MainView"> <li><img src="./img/0.gif" alt="xxx0"> <li><img src="./img/1.gif" alt="xxx1"> <li><img src="./img/2.gif" alt="xxx2"> <li><img src="./img/3.gif" alt="xxx3"> <li><img src="./img/4.gif" alt="xxx4"> <li><img src="./img/5.gif" alt="xxx5"> <li><img src="./img/6.gif" alt="xxx6"> </ul> <ul id="ItemList"> <li> <a href="#"> <img src="./img/0.gif" alt="yyy0" class="hv"> </a> <li> <a href="#"> <img src="./img/1.gif" alt="yyy1" class="hv"> </a> <li> <a href="#"> <img src="./img/2.gif" alt="yyy2" class="hv"> </a> <li> <a href="#"> <img src="./img/3.gif" alt="yyy3" class="hv"> </a> <li> <a href="#"> <img src="./img/4.gif" alt="yyy4" class="hv"> </a> <li> <a href="#"> <img src="./img/5.gif" alt="yyy5" class="a hv bc"> </a> <li> <a href="#"> <img src="./img/6.gif" alt="yyy6" class="hv"> </a> </ul> </div> <script type="text/javascript"> //@cc_on var AutoChanger = function ( ) { this.init.apply( this, arguments ); this.start( ); }; AutoChanger.prototype.init = (function ( ) { return function ( id, wait, step, span ) { this.p = document.getElementById ( id ); if( !this.p ) return; this.tw = this.p.clientWidth; this.th = this.p.clientHeight; this.ts = [ ]; this.tmid = null; this.wait = wait || 7000; this.step = step || 1.5; this.span = span || 70; this.no = 0; var o, s = this.p.style, c = this.p.firstChild; s.overflow = 'hidden', s.position = 'relative'; while( o = c ) { c = o.nextSibling; if( 'LI' == o.nodeName ) { o.style.position = 'absolute'; this.ts.push( o ); } else this.p.removeChild( o ); } }; })(); AutoChanger.prototype.change = (function ( ) { return function ( n, r ) { if( this.no == n ) return; this.no = ( 'number' == typeof n ? n: this.no + 1 ) % this.ts.length; r = Math.floor( 'number' == typeof r ? r : Math.random() * 4 % 4); var tmid = setInterval( (function ( that, t, z ) { var fade = 1; var step = that.step; var s = t.style; s.top = z[1] + 'px'; s.left = z[0] + 'px'; that.p.appendChild( t ) return function ( ) { if( 0.01 < ( fade /= step ) ) { s.top = Math.floor( z[1] * fade ) + 'px'; s.left = Math.floor( z[0] * fade ) + 'px'; s./*@if( @_jscript ) filter = 'Alpha(opacity=' + (100 - fade * 100) + ')' @else@*/ opacity = 1 - fade + '' /*@end@*/; } else { clearInterval( tmid ); that.start( ); } }; })( this, this.ts[ this.no = this.no % this.ts.length ], [[ 0, -this.th], [ this.tw, 0 ], [ 0, this.th ], [ -this.tw, 0]][ r ] ), this.span ); }; })(); AutoChanger.prototype.start = (function ( ) { return function ( ) { this.stop( ); return this.tmid = setTimeout( (function ( that ) { return function ( ) { that.change( ); }; })( this ), this.wait ) }; })(); AutoChanger.prototype.stop = (function ( ) { return function ( ) { return clearInterval( this.tmid ); }; })(); //__________ var ListRoller = function ( ) { this.init.apply( this, arguments ); this.start( ); }; ListRoller.prototype.init = (function ( ) { return function ( id, step, span ) { this.p = document.getElementById( id ); if( !this.p ) return; this.ts = this.p.getElementsByTagName( 'LI' ); this.step = step || 2; this.span = span || 50; this.tmid = null; var s = this.p.style; var c = 0, b = 0, max = 0, o; s.overflow = 'hidden', s.position = 'relative'; while( o = this.ts[ c++ ] ) { s = o.style; s.position = 'absolute'; s.left = '0px'; s.top = ( max += b ) + 'px'; b = o.offsetHeight; } this.max = max; }; })(); ListRoller.prototype.start = (function ( ) { return function ( ) { return this.tmid = setInterval( (function ( that ) { return function ( ) { var i = 0, o, h, t; if( that.step > 0 ) { while( o = that.ts[ i++ ] ) { t = ( h = o.offsetTop + that.step ) - that.max; if( 0 < t ) h = -o.offsetHeight + t; o.style.top = h + 'px'; } } else { while( o = that.ts[ i++ ] ) { t = ( h = o.offsetTop + that.step ) + o.offsetHeight; if( 0 > t ) h = that.max + t; o.style.top = h + 'px'; } } }; })( this ), this.span ); }; })(); ListRoller.prototype.stop = (function ( ) { return function ( ) { return clearTimeout( this.tmid ); }; })(); ListRoller.memory = [ ]; ListRoller.Listener = (function ( ) { var m; return function ( evt ) { var e = evt./*@if( @_jscript ) srcElement @else@*/ target /*@end@*/; var p = P( e, 'nodeName', 'UL' ) || { }; if( m && m.obj ) m.obj.start( ); if( m = ListRoller.memory[ p.id ] ) { m.obj && m.obj.stop( ); m.cbFunc && m.cbFunc( e, C( P( e, 'nodeName', 'LI' ) ) ); } function P(n,t,v){return n?v==n[t]?n:arguments.callee(n.parentNode,t,v):null} function C(n,c,t){ if((c=-1)&&n&&(t=n.nodeName))do c+=(t==n.nodeName);while(n=n.previousSibling) return c; } }; })(); ListRoller.add = function ( id, step, interval, cbFunc ) { var e = document.getElementById( id ); if( ! this.memory[0] ) { document./*@if( @_jscript ) attachEvent( 'on' + @else@*/ addEventListener( /*@end@*/ 'mouseover', ListRoller.Listener, false ); } if( e && 'UL' == e.tagName && !ListRoller.memory[ id ] ) this.memory[ id ] = { cbFunc: cbFunc, obj: new this( id, step, interval ) }; }; //__________ var ImageHover = function ( cssName, addStr ) { var reg_chk = new RegExp( '(^|\\s)' + cssName + '($|\\s)' ); var reg_rep = new RegExp( '^(.+)(\\..+)$' ); var reg_pbk = new RegExp( '^(.+)' + addStr + '(\\..+)$'); var m; return function ( evt ) { var e = evt./*@if( @_jscript ) srcElement @else@*/ target /*@end@*/; if( m && m != e ) m.src = m.src.replace( reg_pbk, '$1$2' ); if( 'IMG' == e.nodeName && reg_chk.test( e.className ) ) { e.src = e.src.replace( reg_rep, '$1' + addStr + '$2' ); m = e; } }; }; //__________ document./*@if( @_jscript ) attachEvent( 'on' + @else@*/ addEventListener( /*@end@*/ 'mouseover', ImageHover( 'hv', '_rev' ) , false ); ListRoller.add( 'ItemList', -1, 100, (function ( that ) { return function ( e, n ) { that.change( n, 1 ); }; })(new AutoChanger( 'MainView', 3000, 1.5, 70 ) ) ); </script> </body> </html> きっと、たくさんみすがありそう～！
補足
babu_baboo様、私のためにありがとうございます。コピペで実行してみましたが、画面が真っ白で。私も自分なりにがんばって見ます。
- babu_baboo
- ベストアンサー率51% (268/525)
がぞうをかえるやつ。 var ImageHover = function ( cssName, addStr ) { var reg_chk = new RegExp( '(^|\\s)' + cssName + '($|\\s)' ); var reg_rep = new RegExp( '^(.+)(\\..+)$' ); var reg_pbk = new RegExp( '^(.+)' + addStr + '(\\..+)$'); var m; return function ( evt ) { var e = evt./*@if( @_jscript ) srcElement @else@*/ target /*@end@*/; if( m && m != e ) m.src = m.src.replace( reg_pbk, '$1$2' ); if( 'IMG' == e.nodeName && reg_chk.test( e.className ) ) { e.src = e.src.replace( reg_rep, '$1' + addStr + '$2' ); m = e; } }; }; document./*@if( @_jscript ) attachEvent( 'on' + @else@*/ addEventListener( /*@end@*/ 'mouseover', ImageHover( 'hv', '_rev' ) , false ); ----- <img src="1.gif" class="hv"> としておくと src="1_rev.gif"になるってのは？
- babu_baboo
- ベストアンサー率51% (268/525)
AutoChangerを、ぜんぶかきかえました。 Locaterもひつようありません。 var AutoChanger = function ( id, wait, step, span ) { var p = document.getElementById ( id ); if( !p ) return; var tw = p.clientWidth, th = p.clientHeight, tc = p.firstChild; var ts = [ ]; var no = 0, o, s = p.style; var tmid; s.overflow = 'hidden', s.position = 'relative'; while( o = tc ) { tc = o.nextSibling; if( 'LI' == o.nodeName ) { o.style.position = 'absolute'; ts.push( o ); } else p.removeChild( o ); } this.change = function ( n, r ) { no = ( 'number' == typeof n ? n: no + 1 ) % ts.length; r = ( 'number' == typeof r ? r : Math.random() * 4 ) % 4 |0; var target = ts[ no = no % ts.length ]; var z = [[ 0, -th], [ tw, 0 ], [ 0, th ], [ -tw, 0]][ r ]; var fade = 1; var s = target.style; var that = this; p.appendChild( target ); (function ( ) { if( 0.001 < ( fade /= step ) ) { s.top = ( z[1] * fade | 0) + 'px'; s.left = ( z[0] * fade | 0) + 'px'; s./*@if( @_jscript ) filter = 'Alpha(opacity=' + (100 - fade * 100) + ')' @else@*/ opacity = 1 - fade + '' /*@end@*/; return setTimeout( arguments.callee, span ); } that.start( ); })(); }; this.start = function ( ) { this.stop(); return tmid = setTimeout( (function ( that ) { return function ( ) { that.change( ); }; })( this ), wait ); }; this.stop = function ( ) { return clearInterval( tmid ); }; return this.start(); }; がぞうを２つよういするひつようはなくて、srcをかきかえるだけで いいんじゃない？！ じかんをみては、みなおしてるので、じかんかかるよ～^^;
- fujillin
- ベストアンサー率61% (1594/2576)
＞過去の質問ログを全部調べましたが、ないものですね。 単に、組み合わせればいいだけなのでは？ でも、少々複雑なので不明な点が多いのと、提示のソースもコピペのようなので、どこまでが必要なものなのかもわからない。 ・ロールオーバーする画像と、拡大される画像は別物なのか？ ・リンクタグや赤いボーダーのラインは必要なのか？ ・ロールオーバーと一定時間のランダムチェンジが重なるときの処置は？ などなどの不明なところは勝手に創造。 原型としてのサンプルになるのか、ならないのか…?? <html> <head><title>test</title> <style type="text/css"> div.box0 * { margin:0; padding:0; } div.box0 #mainview { position:relative; } div.box0 #mainview img { position:absolute; left:0; width:590px; height:180px; border:1px solid red; } div.box0 #thumbnail { margin-left:590px; list-style:none; } div.box0 #thumbnail li { line-height:0; font-size:0; } div.box0 #thumbnail img { width:180px; height:50px; border:1px solid red; display:none; } div.box0 #thumbnail img.appear { display:inline; } </style> <script type="text/javascript"> window.onload = function() { sample(); } function sample(evt){ var intvl = 10000; //←画像変化の間隔(msec) if (!evt) return changer(); var t = evt.target || evt.srcElement; if (t.nodeName != 'IMG') return; var e, p = t.parentNode, f = !!(evt.type=='mouseover'); while (p.nodeName != 'LI') p = p.parentNode; e = p.getElementsByTagName('IMG'); if (e[1]) { e[0].className = f?'':'appear'; e[1].className = f?'appear':''; } if (f && t == e[0] && e[2]) changer(e[2]); function changer(e) { if (!e) { this.op = 100; this.watch = setInterval( watcher, intvl); return; } if (this.tid) clearInterval(tid); var mv = document.getElementById('mainview').getElementsByTagName('IMG'); mv[0].src = mv[1].src, mv[1].src = e.src; mv[0].alt = mv[1].alt, mv[1].alt = e.alt; setOpacity(mv[0], this.op); setOpacity(mv[1], 0), this.op = 0; clearInterval(this.watch); this.tid = setInterval(trans, 40); this.watch = setInterval( watcher, intvl); function trans() { this.op += 5; if (this.op > 100 ) this.op = 100; setOpacity(mv[1], this.op); if (this.op >= 100) clearInterval(this.tid), this.tid = null; } function watcher() { if (this.tid) return; var elm = document.getElementById('thumbnail').getElementsByTagName('LI'); var e = elm[Math.floor(Math.random() * elm.length)].getElementsByTagName('IMG'); if (e[2]) changer(e[2]); } } function setOpacity(e, o) { e.style.filter = 'alpha(opacity=' + o + ')'; e.style.MozOpacity = o/100; e.style.opacity = o/100; } } </script> </head> <body> <div class="box0"> <div id="mainview"> <img src="" alt=""> <img src="X0.gif" alt="xxx0"> </div> <ul id="thumbnail" onmouseover="sample(event)" onmouseout="sample(event)"> <li> <a href="#"> <img src="Y1.gif" alt="yyy1" class="appear"> <img src="Z1.gif" alt="zzz1"></a> <img src="X1.gif" alt="xxx1"> </li> <li> <a href="#"> <img src="Y2gif" alt="yyy2" class="appear"> <img src="Z2.gif" alt="zzz2"></a> <img src="X2.gif" alt="xxx2"> </li> <li> <a href="#"> <img src="Y3.gif" alt="yyy3" class="appear"> <img src="Z3.gif" alt="zzz3"></a> <img src="X3.gif" alt="xxx3"> </li> <li> <a href="#"> <img src="Y4.gif" alt="yyy4" class="appear"> <img src="Z4.gif" alt="zzz4"></a> <img src="X4.gif" alt="xxx4"> </li> </ul> </div> </body> </html> 個人的にはちらちらとにぎやかなのはあまり好きではないし、ユーザのロールオーバーで変わったところが勝手に変わるなどというのは堪えられない。
補足
fujillin様、ありがとうございます。結構むずかしいんですね。あの、更に質問なんですが、右側の画像を下から上に動かす事と更にマウスオンでその動きを止める事ってできますか？ 過去ログの http://oshiete1.goo.ne.jp/qa5506624.htmlの質問 の動きを融合したいのですが。よろしければ何とぞよろしくお願いします。
- babu_baboo
- ベストアンサー率51% (268/525)
ごめん！なにいってんだろ。きょうもぼけまくってる。 <div id="box0">のなかに、 <span id="mainview">をりすとこうぞうにして、ふろーとさせれば いいじゃん。そうすれば、したのりすとも、みぎになるし。 これからでかけるので、のちほど。
- babu_baboo
- ベストアンサー率51% (268/525)
きょうは、いそがしいので、びみょうで・・・。 <span id="mainview"> </span> と、おなじといえば、おなじ。 そもそも、そのおやの<div>でかこんでいるのだから それは（span）いみをなさないのでは？ ただ、まーくあっぷからみれば、わくのなかにがぞうが あるだけってどうよ？ってことなのだとおもう。 だから、りすとこうぞうをがぞうにもてきようする。 そのうえでかんがえたほうが・・・。 すくりぷとがおふのときをかんがえて、display:noneはせず、 overflow:autoにして、すくりぷとから、それをhiddenにするとか。 あれは、子がLIかちぇっくしてるので、それをはずせば？ おなじといえばおなじ？ めにゅ～にあたるぶぶんの、りすとも、いちいち、まうすいべんとを つけるのもめんどうかな？ あぁ～なんだか、じぶんが、かこにだめだしされたときをおもいだすね。 ごめんね。いちどにこたえられなくて^^; おもいたったものから、こたえるから、むだにかいとうがおおにのだと・・。
補足
babu_baboo様、ありがとうございます。お忙しいという事で無理なさらないで下さい。もしよろしければ、具体的なアドバイスと申しますか、具体的なスクリプトを記述頂ければうれしいです。私もそれまで自分なりに頑張ってみます。よろしくお願いします。
- babu_baboo
- ベストアンサー率51% (268/525)
このあいだ、ちょっと、にたようなのがありました。 http://okwave.jp/qa5497200.html
補足
babu_baboo様、ありがとうございます。あの、http://okwave.jp/qa5497200.htmlでbabu_baboo様がお答えになっておられる回答の中の <ul id="menu"> の部分はこの場合の例でいえば、<span id="mainview"> とイコールで良いのでしょうか？ つまり 「menu」の部分を「mainview」に変えて考えれば良いのでしょうか？ すみません。ご教授願います。
補足
babu_baboo様、お忙しい中ありがとうございます。右側の180x50の画像をロールオーバーで画像を変えたいんですけど、その場合、もう６個画像が必要ですよね。その場合、 <img src="./img/y0.gif" alt="yyy0"><img src="./img/z0.gif" alt="zzz0">のようにしたのですが、うまくいきませんでした。 <li onmouseover="sample(this,true)" onmouseout="sample(this,false)"> のような記述がいるのですか？よろしくお願いします。