リンクで画像を置き換えたい

解決済

質問者：rythm
質問日時：2008/05/22 18:39
回答数：1件

初心者ですが、よろしくお願いします。

たとえば
001.jpg
002.jpg
003.jpg
という３つの画像ファイルがある場合に、
----------------------------------
<html>
<body>
～省略～
<a href = "#" onclick = "change_img(1)">画像1</a>
<a href = "#" onclick = "change_img(2)">画像2</a>
<a href = "#" onclick = "change_img(3)">画像3</a>
<img src = "XXX.JPG>
</body>
</html>
----------------------------------
のような感じで画像１，２，３のリンクをクリックすることで、
ページ切り替えるのではなく、
XXX.JPGの部分のみ切り替えるscriptを考えているのですが、
ご教授願いないでしょうか？

要望としては、切替候補の複数の画像は
ページをロードしたときに最初に全て読み込んでおいて、
リンククリック時の画像の切替をスピーディにしたいと考えています。

サンプルの上記例にそくしたサンプルのコードなどを
回答いただけると助かります。

よろしくお願いいたします。

通報する

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

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： auty
回答日時：2008/05/22 20:51

以下のコードを参考にしてみてください。

------------------------------------------------------------

<html lang="ja">
<head>
　　<script type='text/javascript'>
　　var imgs = new Array(new Image(),new Image(),new Image());
for (var i=0 ; i<imgs.length ; i++) imgs[i].src = '00' + (i+1) + '.jpg';

function change_img(num) {
document.getElementById("gazou").src = imgs[num-1].src;
return false;
}
　　</script>
</head>
<body>
　<div>
<a href = "#" onclick = "return change_img(1)">画像1</a>
<a href = "#" onclick = "return change_img(2)">画像2</a>
<a href = "#" onclick = "return change_img(3)">画像3</a>
<hr />
<img src = "1.jpg" id="gazou">
　</div>
</body>
</html>