画像にマウスが重なると画像とテキストを変えたい！

質問

いろいろ考えましたが、手詰まりになってしまいました。やはり、JavaScriptは難しいですね。。。
現在、HPを作っていまして、写真が80px位のものが横並びで10枚程あり、そこへマウスが乗っかると、1、その下に300px位の上記の写真の大きいものが表示され、また、その写真の下にあるnextとbackのボタンで写真が次へと入れ替わっていく事（最後までいくと最初に戻る）、2、その横にその写真の説明も同時に表示させたいのですが、1はなんとかいろいろ調べてJavaScriptを使い出来たのですが、2の方法が分かりません。どうか、教えていただけないでしょうか？

ヘッドに埋めたソースとしては

<script language="JavaScript"><!--
ImgA = new Array()
ImgA[0]="item/s_item/1.jpg"
ImgA[1]="item/s_item/2.jpg"
ImgA[2]="item/s_item/3.jpg"
ImgA[3]="item/s_item/4.jpg"
ImgA[4]="item/s_item/5.jpg"
ImgA[5]="item/s_item/6.jpg"
ImgA[6]="item/s_item/7.jpg"
ImgA[7]="item/s_item/8.jpg"
ImgA[8]="item/s_item/9.jpg"
ImgA[9]="item/s_item/10.jpg"
ImgA[10]="item/s_item/11.jpg"
ImgA[11]="item/s_item/12.jpg"
ImgA[12]="item/s_item/13.jpg"
ImgA[13]="item/s_item/14.jpg"
ImgA[14]="item/s_item/15.jpg"
ImgA[15]="item/s_item/16.jpg"
ImgA[16]="item/s_item/17.jpg"

DImgs = new Array()
for (i=0 ; i<ImgA.length ; i++){
DImgs[i] = new Image()
DImgs[i].src = ImgA[i]
}
function Swap(a,b){
a=a.name
document.images[a].src = ImgA[b]
}
v = 0
function Change(a,b,c){
a=a.name
num = c - b +1
v =(v+1+num)%num
w = v + b
document.images[a].src = ImgA[w]
return false
}
v = 0
function Changeback(a,b,c){
a=a.name
num = c - b -1
v =(v-1+num)%num
x = v + b
document.images[a].src = ImgA[x]
return false
}

これがボタンで写真が入れ替わる部分です。これに対応して、bodyに

<li class="example_3_item"><a href="#" onmouseover="Swap(swapimage,0)" onmouseout="Swap(swapimage,0)"><img src="item/s_banner/01.jpg" name="0" height="86" border="0"></a>

"swapimage"は1の配置された大きい写真の、idとnameです。この横にテキストを3行程入れてたいと思っています。

分かりづらいかも知れませんがどうぞよろしくお願いいたします。

回答No.1

leap_day · ベストアンサー

こんにちは

簡単なサンプルですが参考にどうぞ（＾＾）

<style type="text/css">
#imagegallary {
width:900px;
}
#imagegallary img {
width:86px;
height:86px;
border:none;
}
#gallary {
width:600px;
margin:auto;
text-align:center;
}
#swapimage {
width:300px;
height:300px;
float:left;
}
#swaptext {
width:300px;
float:left;
}
</style>

<script type="text/javascript"><!--
ImgA = new Array();
ImgA[0]="item/s_item/1.jpg"
ImgA[1]="item/s_item/2.jpg"
ImgA[2]="item/s_item/3.jpg"
ImgA[3]="item/s_item/4.jpg"
ImgA[4]="item/s_item/5.jpg"
ImgA[5]="item/s_item/6.jpg"

Text = new Array();
Text[0] = "画像1の説明";
Text[1] = "画像2の説明";
Text[2] = "画像3の説明";
Text[3] = "画像4の説明";
Text[4] = "画像5の説明";
Text[5] = "画像6の説明";

DImgs = new Array()
for (i=0 ; i<ImgA.length ; i++){
DImgs[i] = new Image()
DImgs[i].src = ImgA[i]
}

num = 0;
function Swap(n) {
document.getElementById("swapimage").src = DImgs[n].src;
document.getElementById("swaptext").innerHTML = Text[n];
num = n;
}

function back() {
num --;
if(num < 0) num = ImgA.length-1;
document.getElementById("swapimage").src = DImgs[num].src;
document.getElementById("swaptext").innerHTML = Text[num];
}

function next() {
num ++;
if(num == ImgA.length) num = 0;
document.getElementById("swapimage").src = DImgs[num].src;
document.getElementById("swaptext").innerHTML = Text[num];
}

//--></script>

<div id="imagegallary">
<img src="item/s_banner/01.jpg" onMouseover="Swap('0')" alt="Gallary_item0">
<img src="item/s_banner/02.jpg" onMouseover="Swap('1')" alt="Gallary_item1">
<img src="item/s_banner/03.jpg" onMouseover="Swap('2')" alt="Gallary_item2">
<img src="item/s_banner/04.jpg" onMouseover="Swap('3')" alt="Gallary_item3">
<img src="item/s_banner/05.jpg" onMouseover="Swap('4')" alt="Gallary_item4">
<img src="item/s_banner/06.jpg" onMouseover="Swap('5')" alt="Gallary_item5">
</div>
<div id="gallary">
<div>
<img src="*****.jpg" id="swapimage" alt="Gallary">
<div id="swaptext">
↑の****.jpgの画像は適当に作ってね
</div>
<div style="clear:both;"></div>
</div>
<input type="button" value="BACK" onclick="back()">
<input type="button" value="NEXT" onclick="next()">
</div>

お礼

ありがとうございます！
まさにコレです！

今、このソースをHPへ搭載できるか。。
チャレンジ中です！

また、ご報告しますね。

回答No.2

ai10

配列変数に複数の要素を入れたい場合は、

var arr = new Array( 要素1, 要素2, 要素3, ... );

とするか、

var arr = [ 要素1, 要素2, 要素3, ... ];

とした方が簡単だと思います。
(いちいち、arr[*] = 要素; と書くのは面倒だ)
ただし、new Array( * ) の方では
要素が１つしかなく、しかも、その要素が数値の場合は注意。
たとえば、5という数値を入れておきたいだけの場合

var arr = new Array( 5 );

とすると、配列の要素数が５とされてしまい、
arr[0] には何も入りません。(undefined)

var arr = [ 5 ];

なら大丈夫です。

ちなみに、onmouseover や onclick などのイベントは document
を監視するだけでＯＫなようです。
(速度は遅くなりますが)

-------------------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang='ja'>

　<head>
　　<title></title>
　　<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
　　<meta http-equiv="Content-Style-Type" content="text/css">
　　<meta http-equiv="Content-Script-Type" content="text/javascript">

　　<script type="text/javascript">
　　　//@cc_on
　　　( function ( toImageObject, splitBreakLine, createEvent )
　　　{
　　　　　var arrImgs, arrNotes, _event;
　　　　　arrImgs = [
　　　　　　　'images/A.jpg',
　　　　　　　'images/B.jpg',
　　　　　　　'images/C.jpg',
　　　　　　　'images/D.jpg'
　　　　　];
　　　　　arrNotes = [
　　　　　　　'Aに関する説明です\n３行まで\n表示可能です。\n４行目からは無視されます。',
　　　　　　　'Bに関する説明です\nあああ\nいいい\nううう',
　　　　　　　'Cに関する説明です\nえええ\nおおお\nかかか',
　　　　　　　'Dに関する説明です\n\nききき\nくくく\nけけけ' // ←　「くくく」から無視されます
　　　　　];
　　　　　toImageObject( arrImgs ); // Imageオブジェクトに変換
　　　　　splitBreakLine( arrNotes ); // １行ごとに分割
　　　　　_event = createEvent( arrImgs, arrNotes );
　　　　　// イベント登録
　　　　　_event.add( window, 'load', _event.onload );
　　　　　_event.add( document, 'mouseover', _event.onmouseover );
　　　　　_event.add( document, 'click', _event.onclick );
　　　　　// destroy
　　　　　arrImgs = arrNotes = toImageObject = splitBreakLine = _event = null;
　　　} )(
　　　　　// 画像パス(文字列)からImageオブジェクトに変換
　　　　　function ( arr )
　　　　　{
　　　　　　　var i, I, tmp;
　　　　　　　for( i=0, I=arr.length; i<I; i++ )
　　　　　　　{
　　　　　　　　　(tmp = new Image()).src = arr[i];
　　　　　　　　　arr[i] = tmp;
　　　　　　　}
　　　　　　　// destroy
　　　　　　　i = I = tmp = arr = null;
　　　　　},
　　　　　// テキスト(文字列)を１行ずつに分割する関数
　　　　　function ( arr )
　　　　　{
　　　　　　　var i, I, tmp;
　　　　　　　for( i=0, I=arr.length; i<I; i++ )
　　　　　　　{
　　　　　　　　　tmp = '' + arr[i];
　　　　　　　　　tmp = tmp.replace( /\n(?=\n)/g, '\n　' );
　　　　　　　　　arr[i] = (tmp+'\n　\n　\n　').split( /\n/ );
　　　　　　　}
　　　　　　　// destroy
　　　　　　　i = I = tmp = arr = null;
　　　　　},
　　　　　function ( arrImgs, arrNotes )
　　　　　{
　　　　　　　var currentIndex = 0;
　　　　　　　// 画像、および、説明文を入れ替える関数
　　　　　　　var　changeViewImgAndNote = function ()
　　　　　　　{
　　　　　　　　　var objViewImg, objNote, idx, i;

　　　　　　　　　idx = currentIndex;
　　　　　　　　　// 画像入れ替え
　　　　　　　　　if( (objViewImg = document.getElementById( 'id-view-img' )) )
　　　　　　　　　　　objViewImg.src = arrImgs[idx].src;
　　　　　　　　　// 説明文入れ替え
　　　　　　　　　for( i=0; ; i++ )
　　　　　　　　　{
　　　　　　　　　　　if( ! (objNote = document.getElementById( 'id-note-'+i )) ) break;
　　　　　　　　　　　!!objNote.firstChild && objNote.removeChild( objNote.firstChild );
　　　　　　　　　　　objNote.appendChild( document.createTextNode( arrNotes[idx][i] ) );
　　　　　　　　　}
　　　　　　　　　// destroy
　　　　　　　　　objViewImg = objNote = idx = i = null;
　　　　　　　};
　　　　　　　return {
　　　　　　　　　// イベントを追加するための関数
　　　　　　　　　add : function ( obj, eventType, handler )
　　　　　　　　　{
　　　　　　　　　　　obj && obj./*@if (@_jscript) attachEvent( 'on'+ @else@*/ addEventListener( /*@end@*/ '' + eventType,
　　　　　　　　　　　　　 handler, false );
　　　　　　　　　　　// destroy
　　　　　　　　　　　obj = eventType = handler = null;
　　　　　　　　　},
　　　　　　　　　// ロード時に実行される関数
　　　　　　　　　onload : function ()
　　　　　　　　　{
　　　　　　　　　　　var i, objNote;
　　　　　　　　　　　for( i=0; ; i++ )
　　　　　　　　　　　{
　　　　　　　　　　　　　if( ! (objNote = document.getElementById( 'id-note-'+i )) ) break;
　　　　　　　　　　　　　while( objNote.firstChild ) objNote.removeChild( objNote.firstChild );
　　　　　　　　　　　}
　　　　　　　　　　　changeViewImgAndNote ();
　　　　　　　　　　　// destroy
　　　　　　　　　　　i = objNote = null;
　　　　　　　　　},
　　　　　　　　　// マウスオーバー時に実行される関数
　　　　　　　　　onmouseover : ( function ()
　　　　　　　　　{
　　　　　　　　　　　var _regexp = { id : /^id-img-([0-9]+)$/ };
　　　　　　　　　　　return function ( evt )
　　　　　　　　　　　{
　　　　　　　　　　　　　var objImg, ret;
　　　　　　　　　　　　　objImg = evt./*@if (@_jscript) toElement @else@*/ target /*@end@*/;
　　　　　　　　　　　　　if( (ret = objImg.id.match( _regexp.id )) )
　　　　　　　　　　　　　{
　　　　　　　　　　　　　　　currentIndex = ret[1] - 0;
　　　　　　　　　　　　　　　changeViewImgAndNote ();
　　　　　　　　　　　　　}
　　　　　　　　　　　　　// destroy
　　　　　　　　　　　　　evt = objImg = ret = null;
　　　　　　　　　　　}
　　　　　　　　　} )(),
　　　　　　　　　// クリック時に実行される関数
　　　　　　　　　onclick : ( function ()
　　　　　　　　　{
　　　　　　　　　　　var indexMax = arrImgs.length - 1;
　　　　　　　　　　　return function ( evt )
　　　　　　　　　　　{
　　　　　　　　　　　　　var objInput;
　　　　　　　　　　　　　objInput = evt./*@if (@_jscript) srcElement @else@*/ target /*@end@*/;
　　　　　　　　　　　　　switch( objInput.value )
　　　　　　　　　　　　　{
　　　　　　　　　　　　　case 'prev': currentIndex && currentIndex --; changeViewImgAndNote (); break;
　　　　　　　　　　　　　case 'next': (indexMax - currentIndex) && currentIndex ++; changeViewImgAndNote (); break;
　　　　　　　　　　　　　}
　　　　　　　　　　　　　// destroy
　　　　　　　　　　　　　evt = objInput = null;
　　　　　　　　　　　}
　　　　　　　　　} )()
　　　　　　　};
　　　　　}
　　　);
　　</script>
　　<style type='text/css'>
　　　div.img-list
　　　{
　　　　　white-space : nowrap;
　　　}
　　　div.img-list img
　　　{
　　　　　width : 50px;
　　　　　height : 50px;
　　　}
　　　img#id-view-img
　　　{
　　　　　width : 100px;
　　　　　height : 100px;
　　　}
　　</style>
　</head>

　<body>
　　<div class='img-list'>
　　　<img id='id-img-0' src='images/A.jpg'>
　　　<img id='id-img-1' src='images/B.jpg'>
　　　<img id='id-img-2' src='images/C.jpg'>
　　　<img id='id-img-3' src='images/D.jpg'>
　　</div>
　　<div>
　　　<input type='button' value='prev'>
　　　<img id='id-view-img' src='images/A.jpg'>
　　　<input type='button' value='next'>
　　</div>
　　<div>
　　　<p id='id-note-0'>説明文が入るところです</p>
　　　<p id='id-note-1'></p>
　　　<p id='id-note-2'></p>
　　</div>
　</body>

</html>
-------------------------------------------------------------------------
注:
[1] 全角スペースが使われています。
[2] 特殊(?)な書き方をしているのは、私自身の勉強のためでもあり、他意はありません。

お礼

ありがとうございます！

なるほど、、JavaScriptは、変数をクリアしていかないと次に進めないですね。。
複数を扱うのはなかなか難しいですが、ちょっとチャレンジしてみます！

ありがとうございます。