当想在同一位置显示交替显示图片时，可以利用鼠标单击事件，也可以利用鼠标移动事件来改变图片的src。
1 鼠标单击事件
<script type="text/javascript">
function ClickImg(indexedNum, name) {
// indexedNum可以是图片在网页中的序号，也可以是图片的name属性。
var n1 = name + ".jpg"
var n2 = name + "_2.jpg"
if (document.images[indexedNum].src.search(n1) != -1) {
document.images[indexedNum].src = n2
}
else {
if (document.images[indexedNum].src.search(n2) != -1) {
document.images[indexedNum].src = n1
}
}
} // 貌似不支持 document.getElementById(id)方法
</script>
2 鼠标移动事件
<SCRIPT language="JavaScript">
function movepic(img_name,img_src) {
document[img_name].src=img_src;
}
</SCRIPT>
<A HREF="http://www.javascript.com"
onmouseover="movepic('button','tu01.jpg')"
onmouseout="movepic('button','tu02.jpg')">
<IMG NAME="button" SRC="tu03.jpg" ALT="Image"></A>3 单击超链接在同一区域加载不同图片和文本
load()
function load ( )
{
xImage=new Array (2)
xImage[0] = "pic01.gif"
xImage[1] = "pic02.gif"
xImage[2] = "pic03.gif"
xText=new Array (2)
xText[0] = "text 1"
xText[1] = "text 2"
xText[2] = "text 3"
}
function loadimage (x)
{
obr.src=xImage[x];
popis.innerText=xText[x]
}html:
<a href="javascript: loadimage('0')">pic1</a>
<a href="javascript: loadimage('1')">pic2</a>
<a href="javascript: loadimage('2')">pic3</a>
<img src="pic01.gif" border="0" name="obr">
<div id="popis"></div>4 下拉菜单图形预览
image1= new Image();
image1.src = "pic01.gif";
image2= new Image();
image2.src = "pic02.gif";
image3= new Image();
image3.src = "pic03.gif";
function imgchange(){
var imageNum = document.form.selImage.selectedIndex + 1;
fname = eval("image" + imageNum + ".src")
document.img.src = fname
}html:
<form name="form">
<select name="selImage" size=1>
<option selected>图形 1
<option>图形 2
<option>图形 3
</select>
<input type="button" value="View" onClick="imgchange()" name="button">
</form>
<img src="pic01.gif" name="img" > </td>5 多张图片通过单击“上一张”，下一张“交替显示
<html>
<head>
<script language="JavaScript">
num_of_slides = 5; // 图片数目
slide_num = 1; // 哪个图片首先显示
// 图片说明
desc1 = "我喜欢的007男主角";
desc2 = "我喜欢的007男主角";
desc3 = "我喜欢的007男主角";
desc4 = "我喜欢的007男主角";
desc5 = "我喜欢的007男主角";
function firstslide(){
slide_num = 1;
changeslide();
}
function prevslide(){
slide_num = slide_num - 1;
if(slide_num < 1){
slide_num = num_of_slides;
}
changeslide();
}
function nextslide(){
slide_num = slide_num + 1;
if(slide_num > num_of_slides){
slide_num = 1
}
changeslide();
}
function lastslide(){
slide_num = 5;
changeslide();
}
// 改变循环显示图片和相应的说明。
function changeslide(){
// 图片文件名pic1.jpg,pic2.jpg...
eval('document.picbox.src = "pic' + slide_num + '.jpg"');
eval('document.descform.descbox.value = "图片' + slide_num + '说明: '
+ eval('desc' + slide_num) + '"');
}
</script>
<title>Image Slideshow with description</title>
</head>
<!--不要忘记body里面的onload-->
<body onLoad="changeslide()" >
<br>
<div align="center"><br>
<br>
</div>
<div align="center">
<img src="pic1.jpg" name="picbox" width="120" height="155">
<form name="descform">
<p>
<textarea name="descbox" rows="3" cols="25" wrap="virtual" onFocus="this.blur()">
</textarea>
<br>
<a href="javascript:firstslide()">最前面</a>
<a href="javascript:prevslide()">上一幅</a>
<a href="javascript:nextslide()">下一幅</a>
<a href="javascript:lastslide()">最后面</a>
</p>
</form>
</div>
</body>
</html>-End-