Home > Developer > JavaScript
Copy codeThe Code is as follows:
<% @ LANGUAGE = "JAVASCRIPT" CODEPAGE = "936" %>
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/>
<Title> image object </title>
<Script language = "javascript">
<! --
// The book says that the image objects can be pre-cached, which is actually a lie. Below is a specially large image.
Img1 = new Image (0, 300,400)
Img1.src = "http://www.azsz.com/test/view/1.jpg"
Img2 = new Image (300,400)
Img2.src = "http://www.azsz.com/test/view/2.jpg"
Img3 = new Image (300,400)
Img3.src = "http://www.azsz.com/test/view/3.jpg"
Img4 = new Image (0, 300,400)
Img4.src = "http://www.azsz.com/test/view/4.jpg"
Function img (s) {// call a function based on the value from the drop-down menu, that is, the selected item
Im = document. getElementById ("select1"). options [s]. value; // obtain the value of the selected item
Document. getElementById ("img"). src = eval (im + ". src") // use the eval () function to reference the object's src value and assign it to the image on the page
}
// The following is automatically generated by DW, so it is a bit difficult to read. I am too lazy to read it. Please refer to my reference book below.
Function MM_preloadImages () {// v3.0
Var d = document; if (d. images) {if (! D. MM_p) d. MM_p = new Array ();
Var I, j = d. MM_p.length, a = MM_preloadImages.arguments; for (I = 0; I <a. length; 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 = n. indexOf ("? ")> 0 & parent. frames. length ){
D=parent.frames[n.substring(p%1%].doc ument; n = n. substring (0, p );}
If (! (X = d [n]) & d. all) x = d. all [n]; for (I = 0 ;! X & I <d. forms. length; I ++) x = d. forms [I] [n];
For (I = 0 ;! X & d. layers & I <d. layers. length; I ++) xw.mm_findobj(n,d.layers+ I }.doc ument );
If (! X & d. getElementById) x = d. getElementById (n); return x;
}
Function MM_nbGroup (event, kgname) {// v6.0
Var I, img, nbArr, args = MM_nbGroup.arguments;
If (event = "init" & args. length> 2 ){
If (img = MM_findObj (args [2])! = Null &&! Img. MM_init ){
Img. MM_init = true; img. MM_up = args [3]; img. MM_dn = img. src;
If (nbArr = document [attributes]) = null) nbArr = document [attributes] = new Array ();
NbArr [nbArr. length] = img;
For (I = 4; I <args. length-1; I + = 2) if (img = MM_findObj (args [I])! = Null ){
If (! Img. MM_up) img. MM_up = img. src;
Img. src = img. MM_dn = args [I + 1];
NbArr [nbArr. length] = img;
}}
} Else if (event = "over "){
Document. MM_nbOver = nbArr = new Array ();
For (I = 1; I <args. length-1; I + = 3) if (img = MM_findObj (args [I])! = Null ){
If (! Img. MM_up) img. MM_up = img. src;
Img. src = (img. MM_dn & args [I + 2])? Args [I + 2]: (args [I + 1])? Args [I + 1]: img. MM_up );
NbArr [nbArr. length] = img;
}
} Else if (event = "out "){
For (I = 0; I <document. MM_nbOver.length; I ++ ){
Img = document. MM_nbOver [I]; img. src = (img. MM_dn )? Img. MM_dn: img. MM_up ;}
} Else if (event = "down "){
NbArr = document [kgname];
If (nbArr)
For (I = 0; I <nbArr. length; I ++) {img = nbArr [I]; img. src = img. MM_up; img. MM_dn = 0 ;}
Document [kgname] = nbArr = new Array ();
For (I = 2; I <args. length-1; I + = 2) if (img = MM_findObj (args [I])! = Null ){
If (! Img. MM_up) img. MM_up = img. src;
Img. src = img. MM_dn = (args [I + 1])? Args [I + 1]: img. MM_up;
NbArr [nbArr. length] = img;
}}
}
// -->
</Script>
</Head>
<Body onload = "MM_preloadImages ('img/3.jpg ', 'img/2.jpg', 'img/4.jpg ')">
<P> <strong> demonstration 1: No need to change images (a bit distorted) </strong> </p>
<P>
<Select name = "select1" onchange = "img (this. options. selectedIndex)">
<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/7.jpg"/>
</P>
<P> <strong> demonstration 2: mouse-triggered image conversion (the written name seems to be image scrolling) </strong> </p>
<P>
<Script language = "javascript">
// Create two arrays, one in the on state and the other in the off state.
// The array uses a string for indexing to facilitate identification, and does not conflict with each other during code execution.
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)
// Assign a value
Offimg ["play"]. src = "img/1.jpg"
Offimg ["stop"]. src = "img/2.jpg"
Offimg ["pause"]. src = "img/3.jpg"
Offimg ["rewind"]. src = "img/4.jpg"
// 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)
// Assign a value
Onimg ["play"]. src = "img/5.jpg"
Onimg ["stop"]. src = "img/6.jpg"
Onimg ["pause"]. src = "img/7.jpg"
Onimg ["rewind"]. src = "img/1.jpg"
Function on (imgname ){
If (document. images) {// determines whether the browser can process image objects.
Document. images [imgname]. src = onimg [imgname]. src // assign the src value of the corresponding image object to the image
}
}
Function off (imgname ){
If (document. images) {// determines whether the browser can process image objects.
Document. images [imgname]. src = offimg [imgname]. src // assign the src value of the corresponding image object to the image
}
}
Function setmsg (msg) {// status bar Change Prompt
Window. status = msg;
Return true;
}
</Script>
<Table width = "591" border = "1">
<Tr>
<Td width = "169"> <table border = "0" cellpadding = "0" cellspacing = "0">
<Tr>
<Td> <a href = "http://thcjp.cnblogs.com" target = "_ top" onclick = "MM_nbGroup ('drop', 'group1', 'blogs', 'img/3.jpg ', 1) "onmouseover =" MM_nbGroup ('over', 'blogs', 'img/2.jpg ', 'img/4.jpg', 1) "onmouseout =" MM_nbGroup ('out ') "> </a> </td>
</Tr>
</Table>
<P> <a href = "http://thcjp.cnblogs.com"> the above is done by DW <br/>
Yes pre-Loaded Images </a> </p> </td>
& Lt; td width = "406" & gt;
<A href = "http://thcjp.cnblogs.com"> http://thcjp.cnblogs.com ') "onmouseout =" off ('play'); return setmsg ('');"/> </a>
<A href = "http://www.cnblogs.com/thcjp/category/65304.html"> http://www.cnblogs.com/thcjp/category/65304.html') "onmouseout =" off ('stop'); return setmsg ('') "/> </a>
<A href = "http://www.cnblogs.com/thcjp/category/59325.html"> </a>
<A href = "http://thcjp.cnblogs.com"> http://thcjp.cnblogs.com ') "onmouseout =" off ('rewind'); return setmsg (''); "/> </a> </td>
</Tr>
</Table>
</Body>
</Html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
