多个图像交换 - 不确定从哪里开始

Question

我正在处理图像交换（我对 JavaScript 相当缺乏经验），我不知道从哪里开始。以下是我正在尝试的工作以及我正在尝试做的事情：

一张默认图片。

五个预加载的图像。

五个带有鼠标悬停行为的文本链接，可以将预加载的图像替换为默认图像或之前显示的鼠标悬停图像之一。所有图片都将位于页面上的相同位置。

一个重新加载默认图像的文本链接。

所显示的新图像（理想情况下但不是必需的）在加载下一个图像（预加载图像或默认图像）之前一直存在。

希望我能清楚地解释这一点。与从头开始相比，我更擅长修改 JavaScript。为了学习，我不一定要寻找一个完全开发的脚本，但如果有人能在正确的方向上给我一个轻推，我会很感激。谢谢！

戴夫

Answer 1

啊，我找到了解决方案。这是我找到并修改的最终版本...

<script>
function changeimage(towhat,url){
if (document.images){
document.images.targetimage.src=towhat.src
gotolink=url
}
}
function warp(){
window.location=gotolink
}
</script>
<script language="JavaScript1.1">
var myimages=new Array()
var gotolink="#"

function preloadimages(){
for (i=0;i<preloadimages.arguments.length;i++){
myimages[i]=new Image()
myimages[i].src=preloadimages.arguments[i]
}
}
preloadimages("1a.png","2a.png","3a.png","4a.png","5a.png","red.png")
</script>

<!---->

<a href="javascript:warp()"><img src="red.png" name="targetimage" border=0 height="40" width="40"></a>
<br>
<a href="#" onMouseover="changeimage(myimages[0],this.href)">11111</a> <!-- image 1 -->
<br>
<a href="#" onMouseover="changeimage(myimages[1],this.href)">22222</a> <!-- image 2 -->
<br>
<a href="#" onMouseover="changeimage(myimages[2],this.href)">33333</a> <!-- image 3 -->
<br>
<a href="#" onMouseover="changeimage(myimages[3],this.href)">44444</a> <!-- image 4 -->
<br>
<a href="#" onMouseover="changeimage(myimages[4],this.href)">55555</a> <!-- image 5 -->
<br>
<a href="#" onMouseover="changeimage(myimages[5],this.href)">RRRRR</a> <!-- default image -->