<%@LANGUAGE="JAVASCRIPT" CODEPAGE="936"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:///TR/xhtml1/DTD/">
<html xmlns="http:///1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Image Object</title>
<script language="javascript">
<!--
//The book says that this way you can pre-cache the image objects, which is actually a scam. Below is a very large picture I specially prepared
img1=new Image(300,400)
="/test/view/"
img2=new Image(300,400)
="/test/view/"
img3=new Image(300,400)
="/test/view/"
img4=new Image(300,400)
="/test/view/"
function img(s){//Call the function according to the value passed by the drop-down menu, that is, the selected item is called
im=("select1").options[s].value;//Get the value of the selected item
("img").src=eval(im+".src")//Use the eval() function to reference the src value of the object and assign it to the picture on the page
}
//The following is automatically generated by DW, so it is a bit bad and I am too lazy to read. I'm troublesome. Here are what I wrote in my own reference book below
function MM_preloadImages() { //v3.0
var d=document; if(){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=("?"))>0&&) {
d=[(p+1)].document; n=(0,p);}
if(!(x=d[n])&&) x=[n]; for (i=0;!x&&i<;i++) x=[i][n];
for(i=0;!x&&&&i<;i++) x=MM_findObj(n,[i].document);
if(!x && ) x=(n); return x;
}
function MM_nbGroup(event, grpName) { //v6.0
var i,img,nbArr,args=MM_nbGroup.arguments;
if (event == "init" && > 2) {
if ((img = MM_findObj(args[2])) != null && !img.MM_init) {
img.MM_init = true; img.MM_up = args[3]; img.MM_dn = ;
if ((nbArr = document[grpName]) == null) nbArr = document[grpName] = new Array();
nbArr[] = img;
for (i=4; i < -1; i+=2) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = ;
= img.MM_dn = args[i+1];
nbArr[] = img;
} }
} else if (event == "over") {
document.MM_nbOver = nbArr = new Array();
for (i=1; i < -1; i+=3) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = ;
= (img.MM_dn && args[i+2]) ? args[i+2] : ((args[i+1])? args[i+1] : img.MM_up);
nbArr[] = img;
}
} else if (event == "out" ) {
for (i=0; i < document.MM_nbOver.length; i++) {
img = document.MM_nbOver[i]; = (img.MM_dn) ? img.MM_dn : img.MM_up; }
} else if (event == "down") {
nbArr = document[grpName];
if (nbArr)
for (i=0; i < ; i++) { img=nbArr[i]; = img.MM_up; img.MM_dn = 0; }
document[grpName] = nbArr = new Array();
for (i=2; i < -1; i+=2) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = ;
= img.MM_dn = (args[i+1])? args[i+1] : img.MM_up;
nbArr[] = img;
} }
}
//-->
</script>
</head>
<body onload="MM_preloadImages('img/','img/','img/')">
<p><strong>Demo 1: No refresh transformation picture (a bit crooked)</strong></p>
<p>
<select name="select1" onchange="img()">
<option value="img1">1</option>
<option value="img2">2</option>
<option value="img3">3</option>
<option value="img4">4</option>
</select>
<input type="image" name="img" src="img/" />
</p>
<p><strong>Demo 2: Mouse triggers image transformation (the written name seems to be called image scrolling)</strong></p>
<p>
<script language="javascript">
//First create two arrays, one in the on state and the other in the off state
//Arrays use strings as indexing, for the first purpose, for easy identification, and for the second purpose, there will be no conflict during code operation.
offimg=new Array()
offimg["play"]=new Image(60,50)
offimg["stop"]=new Image(60,50)
offimg["pause"]=new Image(60,50)
offimg["rewind"]=new Image(66,55)
//Assignment
offimg["play"].src="img/"
offimg["stop"].src="img/"
offimg["pause"].src="img/"
offimg["rewind"].src="img/"
//The second array
onimg=new Array()
onimg["play"]=new Image(60,50)
onimg["stop"]=new Image(60,50)
onimg["pause"]=new Image(60,50)
onimg["rewind"]=new Image(66,55)
//Assignment
onimg["play"].src="img/"
onimg["stop"].src="img/"
onimg["pause"].src="img/"
onimg["rewind"].src="img/"
function on(imgname){
if(){//Determine whether the browser can process image objects
[imgname].src=onimg[imgname].src// Assign the src value of the corresponding image object to the picture
}
}
function off(imgname){
if(){//Determine whether the browser can process image objects
[imgname].src=offimg[imgname].src// Assign the src value of the corresponding image object to the picture
}
}
function setmsg(msg){//Change status bar prompt
=msg;
return true;
}
</script>
<table width="591" border="1">
<tr>
<td width="169"><table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><a href="" target="_top" onclick="MM_nbGroup('down','group1','Blogs','img/',1)" onmouseover="MM_nbGroup('over','Blogs','img/',1)" onmouseout="MM_nbGroup('over','Blogs','img/','img/',1)" onmouseout="MM_nbGroup('out')"><img src="img/" alt="Tian Hongchuan Blog" name="Blogs" width="80" height="120" border="0" onload="" //</a></td>
</tr>
</table>
<p><a href="">The above is made by DW<br />
It is preloaded with pictures</a></p></td>
<td width="406">
<a href=""><img src="img/" width="80" height="120" border="0" name="play" onMouseOver="on('play');return setmsg('My Tutorial Blog --> ')" onmouseout="off('play');return setmsg('');" //</a>
<a href="/thcjp/category/"><img src="img/" width="80" height="120" border="0" name="stop" onmouseover="on('stop');return setmsg('Tianhong Chuan's Blog's JS Introduction Series Tutorial--> /thcjp/category/')" onmouseout="off('stop');return setmsg('')"/></a>
<a href="/thcjp/category/"><img src="img/" width="80" height="120" border="0" name="pause" onmouseover="on('pause');return setmsg('VS2005 Control Series Tutorial /thcjp/category/')" onmouseout="off('pause');return setmsg('')"/></a>
<a href=""><img src="img/" width="80" height="120" border="0" name="rewind" onmouseover="on('rewind');return setmsg('ajax series video tutorial --> ')" onmouseout="off('rewind');return setmsg('');" //</a></td>
</tr>
</table>
</body>
</html>