画像にマウスが重なると画像とテキストを変えたい!
いろいろ考えましたが、手詰まりになってしまいました。やはり、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行程入れてたいと思っています。
分かりづらいかも知れませんがどうぞよろしくお願いいたします。