プロが教えるわが家の防犯対策術！

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

締切済

  • 質問者：vtsxndw
  • 質問日時：
  • 回答数：4件

複数の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="写真１" OnClick="document.myimg.src='../img/1.png';">
<INPUT type="button" value="写真２" OnClick="document.myimg.src='../img/2.png';">
<INPUT type="button" value="写真３" 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>リスト１</CENTER>
</td>
</tr>
<tr>
<td style="width:120;height:30;background-color:#ffeeee;font-size:12px;" onclick="pic(1);">
<CENTER>リスト２</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>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (4件)

No.4

  • 回答者： babu_baboo
  • 回答日時：

すくりぷとがうごかないかんきょうのひとのこともかんがえましょう！


innerHTMLでごっそりかきかえると、いべんとなんかがやばくない？
りすとのmouseoverも、あまりすすめられたものじゃないよ
    • good
    • 0
    • 件
通報する

No.3

  • 回答者： babu_baboo
  • 回答日時：

その２ばぶ。



<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>
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

通報する
お礼日時：2010/03/23 09:30

No.2

  • 回答者： babu_baboo
  • 回答日時：

もじすうのせいげんがあるのでぶんかつします。


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

<!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>
　　　写真１の説明
　　<li>
　　　写真２の説明
　</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>
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： reggaepunc
  • 回答日時：

ここに何種類か書き方があるので、ご参考に弄ってみて下さい。


innerHTMLは直感的でわかりやすいです。
「複数の画像を同じ場所に表示させ切替える」もできるかと。
http://www.0yen-coding.com/2009/06/innerhtml.html


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

</A_spc>と</B_spc>は要らないと思いますよ。
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

通報する
お礼日時：2010/03/23 08:41

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報