サムネイル画像をオンマウスで拡大表示してそれぞれの画像にリンクを指定する記述について
お世話になります。
JavaScript初心者ですが、フリーソースなどを見つつ勉強しております。
下記のようなhtmlに【js00】と【js01】を読み込んでサムネイル画像をオンマウス時に上部に拡大表示させているのですが、サムネイル画像と拡大表示画像の両方に指定リンクをつけようとしています。
記述４の【js02】のような画像をランダム表示して指定リンクをつけるScriptは発見できたのですが、これを記述１+２+３と組み合わせられず、作業が進まなくなってしまいました…。
フリーソースを応用しようとしすぎて、遠回りな記述になっているかもしれませんが、もし分かる方がいらっしゃったら教えて頂けないでしょうか？
■記述１(html)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<SCRIPT language="JavaScript" type ="text/javascript" src="http://test.com/00.js">
</SCRIPT>
</head>
<body>
<table width="400">
<a href="#" target="_blank">
<img src="http://test.com/img/01.jpg" name="imgSample"></a>
<div>
<div>
<script language="JavaScript" type ="text/javascript" src="http://test.com/01.js">
</script>
</body>
</html>
■記述２(js00)
//画像の名前を配列に代入していきます。
strPictureName = new Array("http://test.com/img/01.jpg","http://test.com/img/02.jpg","http://test.com/img/03.jpg","http://test.com/img/04.jpg","http://test.com/img/05.jpg","http://test.com/img/06.jpg","http://test.com/img/07.jpg","http://test.com/img/08.jpg");
function SetPicture(nVal)
{
document.imgSample.src = strPictureName[nVal];
}
■記述３(js01)
//サムネイル画像をオンマウスで拡大表示
img_num="8";
if( img_num == "" ){img_num='5';}
for ( cnt = 1 ; cnt <= img_num ; cnt++ ) {
cnt2 = cnt-1;
document.write( "<a href=\"#\" onMouseOver=\"SetPicture("+cnt2+");\" class=\"menu\"><img src=\""http://test.com/0"+cnt+".jpg\" width=\"100\" height=\"86\"></a>" ) ;
}
■記述４(js02)
// ランダムに画像を表示する
jmp = new Array();
img = new Array();
// ジャンプ先のアドレス(数字は画像と対応)
jmp[0] = "http://www.yahoo.co.jp/";
jmp[1] = "http://bb.yahoo.co.jp/";
jmp[2] = "http://www.yahoo.co.jp/";
jmp[3] = "http://auctions.yahoo.co.jp/";
jmp[4] = "http://aeu.jp/cs/";
jmp[5] = "http://google.com/";
jmp[6] = "http://google.co.jp/";
jmp[7] = "http://news.yahoo.co.jp/";
// 画像のアドレス(数字はジャンプ先のアドレスと対応)
img[0] = "http://test.com/01.jpg";
img[1] = "http://test.com/02.jpg";
img[2] = "http://test.com/03.jpg";
img[3] = "http://test.com/04.jpg";
img[4] = "http://test.com/05.jpg";
img[5] = "http://test.com/06.jpg";
img[6] = "http://test.com/07.jpg";
img[7] = "http://test.com/08.jpg";
n = Math.floor(Math.random()*jmp.length);
document.write("<a href='"+jmp[n]+"'>");
document.write("<img src='"+img[n]+"' border='0'>");
document.write("</a>");
■完成イメージ
|￣￣￣￣￣￣￣|
| 拡大画像 |
|＿＿＿＿＿＿＿|
|￣||￣||￣||￣|
|＿||＿||＿||＿|←サムネイル
・サムネイル画像をオンマウスで拡大画像を表示
・サムネイル画像、拡大画像それぞれに指定リンクを入れる
・可能であればリンクページは target="_blank" で開きたい
以上がご質問内容です。
初心者で大変恐縮ですが、どうぞよろしくお願いいたします。
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/images/related_qa/c205_3_thumbnail_img_sm.png)
お礼
mat983さん ご回答ありがとうございます。 早速、週末にハンズでチェックしたいと思います。