ウォッチ
質問ですが、まず最初に失礼がありましたらお許し下さい。
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>
の中に何を追加すれば・・・
ご教授の程よろしくお願いします。
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>
この回答への補足
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)">
のような記述がいるのですか？よろしくお願いします。
-
-
- 0
- 件
-
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>
きっと、たくさんみすがありそう～！
この回答への補足
babu_baboo様、私のためにありがとうございます。コピペで実行してみましたが、画面が真っ白で。私も自分なりにがんばって見ます。
補足日時：2009/12/15 21:36-
-
- 0
- 件
-
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"になるってのは？
-
-
- 0
- 件
-
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をかきかえるだけで
いいんじゃない？！
じかんをみては、みなおしてるので、じかんかかるよ～^^;
-
-
- 0
- 件
-
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>
個人的にはちらちらとにぎやかなのはあまり好きではないし、ユーザのロールオーバーで変わったところが勝手に変わるなどというのは堪えられない。
この回答への補足
fujillin様、ありがとうございます。結構むずかしいんですね。あの、更に質問なんですが、右側の画像を下から上に動かす事と更にマウスオンでその動きを止める事ってできますか？
過去ログの http://oshiete1.goo.ne.jp/qa5506624.htmlの質問 の動きを融合したいのですが。よろしければ何とぞよろしくお願いします。
-
-
- 0
- 件
-
No.3
- 回答日時：
ごめん！なにいってんだろ。
きょうもぼけまくってる。<div id="box0">のなかに、
<span id="mainview">をりすとこうぞうにして、ふろーとさせれば
いいじゃん。そうすれば、したのりすとも、みぎになるし。
これからでかけるので、のちほど。
-
-
- 0
- 件
-
No.2
- 回答日時：
きょうは、いそがしいので、びみょうで・・・。
<span id="mainview">
</span>
と、おなじといえば、おなじ。
そもそも、そのおやの<div>でかこんでいるのだから
それは（span）いみをなさないのでは？
ただ、まーくあっぷからみれば、わくのなかにがぞうが
あるだけってどうよ？ってことなのだとおもう。
だから、りすとこうぞうをがぞうにもてきようする。
そのうえでかんがえたほうが・・・。
すくりぷとがおふのときをかんがえて、display:noneはせず、
overflow:autoにして、すくりぷとから、それをhiddenにするとか。
あれは、子がLIかちぇっくしてるので、それをはずせば？
おなじといえばおなじ？
めにゅ～にあたるぶぶんの、りすとも、いちいち、まうすいべんとを
つけるのもめんどうかな？
あぁ～なんだか、じぶんが、かこにだめだしされたときをおもいだすね。
ごめんね。いちどにこたえられなくて^^;
おもいたったものから、こたえるから、むだにかいとうがおおにのだと・・。
この回答への補足
babu_baboo様、ありがとうございます。お忙しいという事で無理なさらないで下さい。もしよろしければ、具体的なアドバイスと申しますか、具体的なスクリプトを記述頂ければうれしいです。私もそれまで自分なりに頑張ってみます。よろしくお願いします。
補足日時：2009/12/11 10:27-
-
- 0
- 件
-
No.1
- 回答日時：
この回答への補足
babu_baboo様、ありがとうございます。あの、http://okwave.jp/qa5497200.htmlでbabu_baboo様がお答えになっておられる回答の中の <ul id="menu"> の部分はこの場合の例でいえば、<span id="mainview"> とイコールで良いのでしょうか？ つまり 「menu」の部分を「mainview」に変えて考えれば良いのでしょうか？
すみません。ご教授願います。
-
-
- 0
- 件
-
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！
似たような質問が見つかりました
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- JavaScript 画像の表示位置 3 2022/12/23 08:25
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- PHP 共通の処理をまとめる方法がわからないのでアドバイスお願いします。 1 2022/12/19 20:20
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- HTML・CSS flex の各子要素を横幅 100% にしたい 1 2022/09/22 21:25
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- HTML・CSS img と p を縦中央に配置したいのですがうまくいきません。 2 2023/01/12 14:38
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
二次元配列を使って順位をだす...
-
読み込んだQRコードをフォーム...
-
jQueryで同じクラス名のものを...
-
正規表現について質問です。条...
-
ローディングアニメーションの...
-
GASでGoogleフォームの自動返信...
-
スマホ上で、左右スワイプで次...
-
ブックマークレットについて
-
React hooksが値を返して配列変...
-
画面遷移を行わずに同一ページ...
-
clear機能を失わずにファイルア...
-
初心者です。gulpでコンパイル...
-
セレクトボックスで配列を呼び...
-
追加ボタンを押した際に ok ボ...
-
①入力フォーム→②確認表示画面→③...
-
EasyUIのSubGrid（jquery）にお...
-
Q&A掲示板の入力フォームに文字...
-
メールフォームの日付入力フォ...
-
HTMLタグに複数のクラスを設定...
-
Googleフォームで選択肢に応じ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
var exports = exports || {}; ...
-
HTMLタグに複数のクラスを設定...
-
jsで質問です。 displayプロパ...
-
画面遷移を行わずに同一ページ...
-
Googleフォームで選択肢に応じ...
-
特定の文字列を複数抜き出した...
-
フロントエンドフレームワーク...
-
変数名をどのようにつけるのが...
-
【JS】selectでchangeした時の...
-
React hooksが値を返して配列変...
-
オブジェクトから任意のプロパ...
-
指定時間になったら、WEBサイト...
-
Colorboxがうまく設置できません
-
二次元配列の中の各行の要素を...
-
読み込んだQRコードをフォーム...
-
IndexedDB を使ってファイルア...
-
HTMLで作った時報アプリが動き...
-
GASに文字列として関数を入れる...
-
GASでGoogleフォームの自動返信...
-
①入力フォーム→②確認表示画面→③...
おすすめ情報
