Writing fun, and no technical content, laughed at.
No use to JS, pure CSS control.
The picture that pops up doesn't "squeeze" the next container.
Tested by IE7 Firefox2.11. (Theory compatible with IE6)
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; Charset=utf-8 "/> <title>www.jb51.net script House mouse over thumbnails enlarge picture </title> <style type=" Text/css "> <!--* {margin:0;padding:0;} Body {Font-family:verdana, Arial, Helvetica, Sans-serif; font-size:12px;} img {border:0} p {font-size:14px;} #imgmove li { Float:left; width:50px; height:40px; Display:block; Overflow:visible;*overflow:hidden; margin:0px 5px; border:3px #333 solid;position:relative;*position:static;} #imgmove img {position:absolute;left:0px;top:0px;clip:rect (0px 50px 40px 0px); z-index:0;*position:static;} #imgmove img:hover {position:relative; left:-3px; top:-3px; border:3px #f00 solid; z-index:2; Clip:rect (0px 137px 137px 0px);}--&G T </style> </pead> <body> <p> This example is intended to show a larger picture when the mouse slides over the thumbnail. </p> <!--[if IE 6]><! [endif]--> <ul id= "Imgmove" > <li></li> <li></li> <li></li> </ul> <!--[if IE 6]><! [endif]--> </body> </ptml>
[Ctrl + A full selection Note: If you need to introduce external JS need to refresh to execute]
