Originally, I wanted to display a GIF image by clicking the search button. I accidentally saw this code, and I felt that the result was quite good.
Code implementation: move the mouse to the name (wait.gif) to display the image. Move the mouse away to not display the image.
Practice: Create an a.html file and a wait.gif file to be displayed in the same directory,
A.html code:
<! Doctype html public "-// W3C // dtd html 4.01 Transitional // EN"
Http://www.w3.org/TR/html4/loose.dtd>
<Html>
<Head>
<Title> </title>
<Script type = "text/javascript">
Var path = './'; // relative path of the image
Function show (obj ){
Var name = obj. innerText;
Var sDiv = document. getElementById ('img _ '+ name. split ('. ') [0]); // determine the file name.
If (! SDiv ){
SDiv = document. createElement ("DIV ");
SDiv. id = 'img _ '+ name. split ('. ') [0];
SDiv. style. position = 'absolute ';
SDiv. style. top = obj. offsetTop + obj. offsetWidth + 'px ';
SDiv. style. left = obj. offsetLeft + obj. offsetHeight + 'px ';
SDiv. style. border = '1px red solid ';
Var img = document. createElement ("img ");
Img. src = path + name;
SDiv. appendChild (img );
Document. body. appendChild (sDiv );
}
SDiv. style. display = 'block ';
}
Function f (obj ){
Var name = obj. innerText;
Var sDiv = document. getElementById ('img _ '+ name. split ('. ') [0]); // determine the file name.
If (sDiv ){
SDiv. style. display = 'none ';
}
}
</Script>
</Head>
<Body>
<Div onmouseover = "show (this)" onmouseout = "f (this)" style = "position: absolute;">
Wait.gif
</Div>
</Body>
</Html> [/img]
Author "cuityang"