When the mouse moves to the small picture, the small picture displays the red border and displays the big picture in the above large picture, the effect
<! DOCTYPE HTML Public"-//W3C//DTD XHTML 1.0 transitional//en" "HTTP://WWW.W3.ORG/TR/XHTML1/DTD/XHTML1-TRANSITIONAL.DTD">"http://www.w3.org/1999/xhtml">"Content-type"Content="text/html; Charset=utf-8"/><title> Untitled Document </title><style type="Text/css">#div {width:500px;height:500px;border:1px solid #fff; Margin:auto;background: #fff}li{list-style:none;float: left;margin-top:-15px;margin-left:50px}</style>"Div"><div style="width:350px;height:262px;border:1px Solid #fff; margin:auto;">"images/show1_big.jpg"Width="349"height="262"/> </div><div style="width:500px;height:50px;border:1px Solid #fff; margin-top:180px"><!--ul starts--><ul> <li>"images/show1.jpg"Width=" -"height=" $"Onmouseover="Change ()"/> </li> <li>"Change1 ()"Src="images/show2.jpg"Width=" -"height=" $"/> </li> <li>"images/show3.jpg"Width=" -"height=" $"Onmouseover="Change2 ()"/> </li> <li>"images/show4.jpg"Width=" -"height=" $"Onmouseover="Change3 ()"/> </li> </ul> <!--ul End--</div></div></body><script type="Text/javascript">//definitionfunction Kuang () {varGetli=document.getelementsbyname ("Li"); for(varI=0; i<getli.length;i++){ } } //defining alternate picture methodsfunction Change () {varImgs=document.getelementsbytagname ("img"); imgs[0].setattribute ("src","images/show1_big.jpg"); Imgs.style.width="border:1px Solid Red"; } //defining alternate picture methodsfunction Change1 () {varImgs=document.getelementsbytagname ("img"); imgs[0].setattribute ("src","images/show2_big.jpg"); } //defining alternate picture methodsfunction Change2 () {varImgs=document.getelementsbytagname ("img"); imgs[0].setattribute ("src","images/show3_big.jpg"); } //defining alternate picture methodsfunction Change3 () {varImgs=document.getelementsbytagname ("img"); imgs[0].setattribute ("src","images/show4_big.jpg"); } </script>Javascript+css interaction