<Html xmlns = "<a href =" http://www.w3.org/1999/xhtml "target =" _ blank ">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/>
<Title> dynamic image display </title>
<Style type = "text/css">
<! --
A {}{
Position: relative;/** // set the positioning method to relative positioning. Wait for the internal information panel to locate it */
Display: block;/** // * display the link in blocks so that the link can respond to the link without clicking the link text */
}
A img {}{
Display: none; visibility: hidden;/** // * the initialization information panel does not display */
}
A: hover {}{ background: # fff ;}/ ** // A State pseudo-class bug in IE7 or earlier versions */
A: hover img {}{
Display: block;
Visibility: visible;
Position: absolute;
Padding: 5px;
Display: block;
Width: 139px;/** // only the width is given, and the height is automatically adjusted as the content */
Left: 50px;/** // * this is the location of parent level */
Top: 20px;
Border: 1px solid #5bb9e9;
Background-color: # e4f6ff;
Z-index: 999;/** // indicates the information panel to a high position, so that the link text does not overlap with the Panel when it is too long, but this is only valid for FF */
}
A img {}{
Border: none;/** // * remove the image border. By default, the image in the link will appear in the standard browser */
Display: block;
Position: absolute;/** // use absolute positioning to extract normal text streams. Otherwise, it will be more difficult to view the normal display of different browsers during design */
Top: 5px;/** // * the px here is the same as that in the big box of the information panel */
Left: 5px;
}
-->
</Style>
</Head>
<Body>
<A href = "#" class = "showImage"> xuejing cabin </img> </a>
</Body>
</Html>
