締切済み

ボタンクリックで画像を替えたい

2009/09/26 12:03

はじめまして。ホームページを作成しているのですが、解決できない問題があり皆様方のお知恵を拝借したく投稿させていただきました。どうかお力添えをいただけますと幸いです。具体的な内容としまして、大きな画像（400px×125px）の下に横並びでボタン（80px×25px）を5つ配置しているのですがそのボタンをクリックすると大きな画像部分がクリックしたボタンにあわせて入れ替わって表示されるようにしたいのです。ボタンA → 画像A ボタンB → 画像B ボタンC → 画像C ボタンD → 画像D ボタンE → 画像E という風に変化させていのですが今ひとつ方法がわからずに苦しんでいます。。これをFLASHをつかわず作成したいと考えています。説明不足、言葉足らずなどあるかとは思いますがどなたかお力添えをいただけませんでしょうか。よろしくお願いいたします。

amanda1976
お礼率0% (0/3)

JavaScript
回答数3
ありがとう数1

みんなの回答 （3）
専門家の回答

みんなの回答

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

2009/09/26 21:09 回答No.3

＃１です。みたびすみません。　　function ( node ) { 　　　var e = node, c = 0; 　　　while( e = e.previousSibling ) if( e.nodeName == node.nodeName ) c++; 　　　return c; 　　}, です。あぁ～だめだ。

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

2009/09/26 20:42 回答No.2

やっぱり、みすってました。ていせいします。　　function ( node ) { 　　　for( var c = 0; node = node.previousSibling; c++ ); return c; 　　}, を　　function ( node ) { 　　　var e = node, c = 0; 　　　while( e = node.previousSibling ) if( e.nodeName == node.nodeName ) c++; 　　　return c; 　　}, に！です。

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

2009/09/26 20:07 回答No.1

HTMLくらいは、かこう！ぜんかくくうはくは、すべてはんかくにしてねめんどうなかきかたで、すみません。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title></title> <style type="text/css"> #viewImage { 　width　: 400px; 　height : 125px; } #list { 　margin　: 0; 　padding : 0; } #list li { 　display : inline; 　border　: 2px #eee outset; 　list-style-type : none; } #list li img { 　width　: 80px; 　height : 25px; 　border : 0px none; } </style> <div> 　<img src="image0_dekkaiyatu.jpg" alt="image0_dekkaiyatu.jpg" id="viewImage"> </div> <ul id="list"> 　<li><img src="image0_mini.jpg" alt="0"></li> 　<li><img src="image1_mini.jpg" alt="1"></li> 　<li><img src="image2_mini.jpg" alt="2"></li> 　<li><img src="image3_mini.jpg" alt="3"></li> 　<li><img src="image4_mini.jpg" alt="4"></li> </ul> 　 <script type="text/javascript"> //@cc_on var L = [ 　'image0_dekkaiyatu.jpg', 　'image1_dekkaiyatu.jpg', 　'image2_dekkaiyatu.jpg', 　'image3_dekkaiyatu.jpg', 　'image4_dekkaiyatu.jpg' ]; var LL = []; for( var c = 0, t; L[c]; c++ ) { 　t = new Image; 　t.src = L[c]; 　LL.push( t ); }; document./*@if( @_jscript ) attachEvent( 'on' + @else@*/ addEventListener( /*@end@*/ 　'click', (function( get, cnt, set, on, off ) { 　　var m = null; 　　return function ( evt ) { 　　　var e　= evt./*@if( @_jscript ) srcElement @else@*/ target /*@end@*/; 　　　if( 'IMG' === e.nodeName && get(e, 'id', 'list') ) { 　　　 off( m ); 　　　 set( cnt( m = e.parentNode ) ); 　　　 on( m ); 　　　} 　　}; 　})( 　　function ( node, type, val ) { 　　　return node ? ( val == node[type] ) ? node: arguments.callee( node.parentNode, type, val): null; 　　}, 　　　　function ( node ) { 　　　for( var c = 0; node = node.previousSibling; c++ ); return c; 　　}, 　　　　(function( e, l ) { 　　　return function ( n ) { 　　　　e.src = e.alt = l[ n ].src; 　　　}; 　　})( document.getElementById( 'viewImage' ), LL ), 　　　　function ( e ) { 　　　if( e ) e.style.borderStyle = 'inset'; 　　}, 　　function ( e ) { 　　　if( e ) e.style.borderStyle = 'outset'; 　　} 　), false); </script>