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

質問

いろいろ考えましたが、手詰まりになってしまいました。やはり、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へ搭載できるか。。
チャレンジ中です！

また、ご報告しますね。