こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

締切り済みの質問

複数のJavascript の組込み方についてです。初心者で色々試して

複数のJavascript の組込み方についてです。初心者で色々試してがんばったのですが、行き詰ってしまいました。私の作りたい物は、ページの左側にリスト部分があり、そのリストをクリックすると右側に写真が出るものです。そしてその写真をクリック、もしくは画像下に作ったいくつかの対応したボタンを押すと、新たな写真が最初に出た写真と同じ場所に表示される、というものになります。私が試行錯誤してみたソースでは、一つ目のリストでは「マウスが触ると写真が切り替わる基本スクリプト」になるように、そして二つ目のリストでは「複数の画像を同じ場所に表示させ切替える」を目指しています。もしお詳しい方で何かお気付きの点があれば、お力を貸して頂けますでしょうか。どうか宜しくお願い致します。

<body>
<div align="center">

<TR>
<SCRIPT language="JavaScript"><!--
a_data=new Array();
a_data[0]='<CENTER><TABLE><TR>'
+'<TD style="width:300;"><img galleryimg=no src="../img/hana1.jpg" onmouseover="this.src='../img/hana2.jpg';"

onmouseout="this.src='../img/hana1.jpg';"></TD></TR></TR>'
+'<TD style="font-size:14px;vertical-align:bottom;">'
+' 写真の説明<br>写真にポインタを合わせると、写真が替わります。'
+'</TD>'
+'</TR></TABLE></CENTER>';

a_data[1]='<CENTER><TABLE><TR>'
+'<TD style="width:300;"><IMG name="myimg" src="../img/0.png" style="float:right; margin:10px 0px 10px
20px;"></TD></TR></TR>';
+'<TD style="font-size:14px;vertical-align:bottom;">'
+' 写真の説明'
<INPUT type="button" value="写真1" OnClick="document.myimg.src='../img/1.png';">
<INPUT type="button" value="写真2" OnClick="document.myimg.src='../img/2.png';">
<INPUT type="button" value="写真3" OnClick="document.myimg.src='../img/3.png';">
<INPUT type="button" value="最初の写真" OnClick="document.myimg.src='../img/0.png';">
+'</TD>'
+'</TR></TABLE></CENTER>';

function pic(sel){document.getElementById("l_menu").innerHTML=a_data[sel];}

//-->
</SCRIPT>
</TR>


<div id="A_spc">
<TABLE>
<tr>
<td style="width:120;height:30;background-color:#ffeeee;font-size:12px;" onclick="pic(0);">
<CENTER>リスト1</CENTER>
</td>
</tr>
<tr>
<td style="width:120;height:30;background-color:#ffeeee;font-size:12px;" onclick="pic(1);">
<CENTER>リスト2</CENTER>
</td>
</tr>
</TABLE>
</A_spc>
</div>

<div id="B_spc">
<TABLE>
<TR>
<TD colspan=2 style="width:350; font-size:12px;padding-left:20;padding-top:35;" id="l_menu">
<CENTER><p class="sample1">左のリストをクリックするとココに写真が出ます。</p></CENTER>
</TD>
</TR>
</TABLE>
</B_spc>
</div>

</div>
</div>
</body>

投稿日時 - 2010-03-22 09:55:32

QNo.5770269

すぐに回答ほしいです

このQ&Aは役に立ちましたか?

3人が「このQ&Aが役に立った」と投票しています

回答(4)

ANo.4

すくりぷとがうごかないかんきょうのひとのこともかんがえましょう!
innerHTMLでごっそりかきかえると、いべんとなんかがやばくない?
りすとのmouseoverも、あまりすすめられたものじゃないよ

投稿日時 - 2010-03-23 10:30:34

ANo.3

その2ばぶ。

<script type="text/javascript"><!--
//@cc_on
function Screening ( e ) {
 if( 'string' === typeof e )
  e = document.getElementById( e );

 var es = e.childNodes, e, t, c = 0;

 while( t = es[c] )
  if( 1 !== t.nodeType )
   e.removeChild( t );
  else
   c += 1;

 return es;
}

function getCount ( e ) {
 var cnt = 0, s = e.nodeName;

 while( e = e.previousSibling )
  if( s === e.nodeName )
   cnt += 1;

 return cnt;
}

function selectNo ( ary, n ) {
 for( var e, c = 0; e = ary[ c ]; c += 1 )
  e.style.display = n == c ? 'list-item': 'none';
 return ary[ n ];
}

function menuChecker ( evt ) {
 var e = evt.srcElement || evt.target, c, n, t;

 if( 'LI' === e.nodeName ) {
  content = selectNo( contents, getCount( e ) );
  selectNo( content.childNodes, cNo = 0 )
 }
}

function clickHandler( evt ) {
 var e = evt./*@if( @_jscript ) srcElement @else@*/ target /*@end@*/;
 var cs = content.childNodes;

 if( /^btn_\d$/.test( e.id ) ) {
  switch( e.id ) {
   case 'btn_1': cNo = 0; break;
   case 'btn_2': if( 0 < cNo ) cNo -= 1; break;
   case 'btn_3': if( cNo < cs.length - 1) cNo += 1; break;
   case 'btn_4': cNo = cs.length -1; break;
  }
  selectNo( cs, cNo );
 }
}

var menu = Screening( 'PhotoList' );
var contents = Screening( 'PhotoContents' );
var content = selectNo( contents, 0 );
var cNo = 0;

(function ( ) {
 for( var i = 0, c; c = contents[i++]; ) {
  Screening( c );
  selectNo( c.childNodes, cNo );
 }

 document./*@if( @_jscript ) attachEvent( 'on' + @else@*/ addEventListener( /*@end@*/
  'click', clickHandler, false );
})();
//-->
</script>

投稿日時 - 2010-03-22 17:51:36

お礼

babu_baboo様、htmlを書いてくださって本当にありがとうございます!見た目が同じページを作るのでも、こんなに中身は違うのですね。洗練された書きかたで、このhtmlから新しく学ばせて頂くことが多くとても参考になりました。お力添え、本当に感謝しております!!

投稿日時 - 2010-03-23 09:30:43

ANo.2

もじすうのせいげんがあるのでぶんかつします。
ていじされたさんぷるは、むししました。
ぜんかくくうはくは、すべてはんかくにしてね
ぐろーばるへんすうをつかわないようにするのは、めんどうなのでパス。^^;

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<title>TEST</title>

<style type="text/css">
ol, ul {
 list-style: none;
 margin: 0;
 padding: 0;
}

#PhotoList {
 float: left;
 width: 300px;
 background-color: #dfd;
}

#PhotoContents {
 margin-left: 300px;
}

#control {
 margin-left: 300px;
 background-color: #ccc;
 width: 480px;
 border: 2px #ccc inset;
 padding: 1ex;
}

.photo {
 border: 2px #888 inset;
 width: 480px;
 height: 300px;
}

.message {
 font-size:12px;
 color:green;
 margin: 1em;
}

.hide {
 display: none;
}
</style>

<body>
 <ul id="PhotoList" onmouseover="menuChecker( event )">
  <li>
   写真1の説明
  <li>
   写真2の説明
 </ul>

 <ul id="PhotoContents">
  <li>
   <ol>
    <li class="photo">
     <img src="photo1_1.jpg" alt="photo1_1.jpg">
    <li class="message">
     写真の説明1-1
   </ol>
    
   <ol>
    <li class="photo">
     <img src="photo1_2.jpg" alt="photo1_2.jpg">
    <li class="message">
     写真の説明1-2
   </ol>

   <ol>
    <li class="photo">
     <img src="photo1_3.jpg" alt="photo1_3.jpg">
    <li class="message">
     写真の説明1-3
   </ol>
  </li>
  
  <li>
   <ol>
    <li class="photo">
     <img src="photo2_1.jpg" alt="photo2_1.jpg">
    <li class="message">
     写真の説明2-1
   </ol>
    
   <ol>
    <li class="photo">
     <img src="photo2_2.jpg" alt="photo2_2.jpg">
    <li class="message">
     写真の説明2-2
   </ol>

   <ol>
    <li class="photo">
     <img src="photo2_3.jpg" alt="photo2_3.jpg">
    <li class="message">
     写真の説明2-3
   </ol>
  </li>
 </ul>

 <form action="#">
  <div id="control">
   <input type="button" value="最初の写真" id="btn_1">
   <input type="button" value="前の写真" id="btn_2">
   <input type="button" value="次の写真" id="btn_3">
   <input type="button" value="最後の写真" id="btn_4">
  </div>
 </from>

投稿日時 - 2010-03-22 17:50:12

ANo.1

ここに何種類か書き方があるので、ご参考に弄ってみて下さい。
innerHTMLは直感的でわかりやすいです。
「複数の画像を同じ場所に表示させ切替える」もできるかと。
http://www.0yen-coding.com/2009/06/innerhtml.html


あと、掲載htmlでミスがありますね。

</A_spc>と</B_spc>は要らないと思いますよ。

投稿日時 - 2010-03-22 14:09:09

お礼

教えて頂いたサイトのinnerHTMLのサンプル03というのが、私のしたいと思っていた動きを完璧に表現していました。こちらを参考に私の書いたものと組み合わせたら、ちゃんと動いてくれました!以前試行錯誤したものだと、それぞれのJavascript 単体では動いてくれるのですが、組み合わせたり『 ' 』が入っているラインを入れると動かなくなってしまっていました。このサイトには他にも興味深い例がいくつも載っていて、innnerHTMLを使ってもっと色々な表現をしてみたいと思うようになりました。的確なアドバイスが載っているサイトを教えて頂き、本当にありがとうございました!!

投稿日時 - 2010-03-23 08:41:45

あなたにオススメの質問