If we want to use js to control the display and hiding of div, we can use js to control the style and define the display settings, in this way, you only need to set none and block dynamically to hide and display the div.
Simple pointing to text display content instance
| The Code is as follows: |
Copy code |
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/>
<Title> oec2003 </title>
<Script language = "JavaScript" type = "text/JavaScript">
<! --
Function toggle (targetid ){
If (document. getElementById ){
Target = document. getElementById (targetid );
If (target. style. display = "block "){
Target. style. display = "none ";
} Else {
Target. style. display = "block ";
}
}
}
-->
</Script>
<Style type = "text/css">
<! --
# Div1 {
Background-color: #000000;
Height: 400px;
Width: 400px;
Display: none;
}
-->
</Style>
</Head> <Body>
<Input type = "button" id = "butn" value = "show/hide" onclick = "toggle ('div1 ')"/>
<Center>
<Div id = "div1"> </div> </center>
Center DIV
</Body>
</Html> |
Display images when connected
| The Code is as follows: |
Copy 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> |
