ベストアンサー

画像のランダムチェンジとフェードイン効果

2009/12/11 08:55

質問ですが、まず最初に失礼がありましたらお許し下さい。 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）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

babu_baboo
ベストアンサー率51% (268/525)

2009/12/12 15:56 回答No.5

とちゅうけいかです。おもったよりめんどうだね～やっぱり・・。 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>

質問者

補足 2009/12/12 18:59

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)"> のような記述がいるのですか？よろしくお願いします。

ログインすると、全ての回答が全文表示されます。

その他の回答 (7)

babu_baboo
ベストアンサー率51% (268/525)

2009/12/15 18:16 回答No.8

どっかに、たくさん、おとしあながありそう。ふかが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> きっと、たくさんみすがありそう～！

質問者

補足 2009/12/15 21:36

babu_baboo様、私のためにありがとうございます。コピペで実行してみましたが、画面が真っ白で。私も自分なりにがんばって見ます。

ログインすると、全ての回答が全文表示されます。

babu_baboo
ベストアンサー率51% (268/525)

2009/12/15 16:28 回答No.7

がぞうをかえるやつ。 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)

2009/12/14 16:38 回答No.6

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)

2009/12/11 20:18 回答No.4

＞過去の質問ログを全部調べましたが、ないものですね。単に、組み合わせればいいだけなのでは？でも、少々複雑なので不明な点が多いのと、提示のソースもコピペのようなので、どこまでが必要なものなのかもわからない。・ロールオーバーする画像と、拡大される画像は別物なのか？・リンクタグや赤いボーダーのラインは必要なのか？・ロールオーバーと一定時間のランダムチェンジが重なるときの処置は？などなどの不明なところは勝手に創造。原型としてのサンプルになるのか、ならないのか…?? <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> 個人的にはちらちらとにぎやかなのはあまり好きではないし、ユーザのロールオーバーで変わったところが勝手に変わるなどというのは堪えられない。

質問者

補足 2009/12/12 07:14

fujillin様、ありがとうございます。結構むずかしいんですね。あの、更に質問なんですが、右側の画像を下から上に動かす事と更にマウスオンでその動きを止める事ってできますか？過去ログの　http://oshiete1.goo.ne.jp/qa5506624.htmlの質問　の動きを融合したいのですが。よろしければ何とぞよろしくお願いします。

ログインすると、全ての回答が全文表示されます。

babu_baboo
ベストアンサー率51% (268/525)

2009/12/11 10:31 回答No.3

ごめん！なにいってんだろ。きょうもぼけまくってる。 <div id="box0">のなかに、 <span id="mainview">をりすとこうぞうにして、ふろーとさせればいいじゃん。そうすれば、したのりすとも、みぎになるし。これからでかけるので、のちほど。

ログインすると、全ての回答が全文表示されます。

babu_baboo
ベストアンサー率51% (268/525)

2009/12/11 10:19 回答No.2

きょうは、いそがしいので、びみょうで・・・。 <span id="mainview"> </span> と、おなじといえば、おなじ。そもそも、そのおやの<div>でかこんでいるのだからそれは（span）いみをなさないのでは？ただ、まーくあっぷからみれば、わくのなかにがぞうがあるだけってどうよ？ってことなのだとおもう。だから、りすとこうぞうをがぞうにもてきようする。そのうえでかんがえたほうが・・・。すくりぷとがおふのときをかんがえて、display:noneはせず、 overflow:autoにして、すくりぷとから、それをhiddenにするとか。あれは、子がLIかちぇっくしてるので、それをはずせば？おなじといえばおなじ？めにゅ～にあたるぶぶんの、りすとも、いちいち、まうすいべんとをつけるのもめんどうかな？あぁ～なんだか、じぶんが、かこにだめだしされたときをおもいだすね。ごめんね。いちどにこたえられなくて^^; おもいたったものから、こたえるから、むだにかいとうがおおにのだと・・。

質問者

補足 2009/12/11 10:27

babu_baboo様、ありがとうございます。お忙しいという事で無理なさらないで下さい。もしよろしければ、具体的なアドバイスと申しますか、具体的なスクリプトを記述頂ければうれしいです。私もそれまで自分なりに頑張ってみます。よろしくお願いします。

ログインすると、全ての回答が全文表示されます。

babu_baboo
ベストアンサー率51% (268/525)

2009/12/11 09:00 回答No.1

このあいだ、ちょっと、にたようなのがありました。 http://okwave.jp/qa5497200.html

質問者

補足 2009/12/11 09:50

babu_baboo様、ありがとうございます。あの、http://okwave.jp/qa5497200.htmlでbabu_baboo様がお答えになっておられる回答の中の　<ul id="menu">　の部分はこの場合の例でいえば、<span id="mainview">　とイコールで良いのでしょうか？　つまり　「menu」の部分を「mainview」に変えて考えれば良いのでしょうか？すみません。ご教授願います。

ログインすると、全ての回答が全文表示されます。