HTML-鼠标经过图片放大收藏

样式： 

     <style> 

          div#resize a:hover { position: absolute;}

          div#resize a:hover img { width: 200px; height: 200px}

      </style>      

代码：

 <div id="resize">

        <a href="#">

            <img src="<s:propertyvalue="pic" />" border=0   height="50"width="50">

        </a>  

</div>

第二个：

<script language="JavaScript" type="text/JavaScript" src="http://search.mall.dangdang.com/mall.js"></script>
<div id="popImageLayer" align="center" name="popImageLayer" style="position:absolute; visibility: hidden; width: 180; height: 180;cursor: hand;border-style:solid;border-width:1pt; border-color:orange" calss=""></div>
<center>
<br /><br /><br />
<img src="http://admin.mall.dangdang.com/GoodsImage/S000000460/Small/200608090909231.png" onMouseOver="popImage(this,'http://admin.mall.dangdang.com/GoodsImage/S000000460/Middle/200608090909231.png','http://wangfenglitai.mall.dangdang.com/products/G00000072867.html');" border=0></a>
</center>

mall.js的源代码

function hideLayer()
{ 
 var layer = document.getElementById("popImageLayer");
 layer.style.visibility='hidden';
}
function dispear(){
 var layer = document.getElementById("popImageLayer");
 if ((layer.style.width>0)&& (layer.style.height>0)){
  layer.style.width-=1;
  layer.style.height-=1;
 }
 else {
  layer.style.visibility='hidden';
  if (window.interval)
  clearInterval(interval);
 }
}

function popImage(obj,img,href)
{
 var layer = document.getElementById("popImageLayer");
 var t=obj.offsetTop;
 var l=obj.offsetLeft;
 while(obj=obj.offsetParent){
  t+=obj.offsetTop;
  l+=obj.offsetLeft;
 }
 var content = "<table border=0 width=180 height=180><tr><td align='center' valign='middle'>/n"+
 "<A href="+href+" target=_blank><IMG src='"+img+"' οnlοad='DrawImage(this,180,180);'  onMouseOut='low(this);hideLayer();' onMouseOver=high(this) style='FILTER: alpha(opacity=10)'></A></td></tr></table>"; // onClick='hideLayer();'

   layer.innerHTML=content;
   layer.style.left =l + 35 -90;
   layer.style.top = t+35-90;
   layer.style.visibility='visible';
}
function moveToMouseLoc(e)
{
 var layer = document.getElementById("popImageLayer");
 var offsetX = -5;
 var offsetY = -5;
 var  x = event.x + document.body.scrollLeft;
 var  y = event.y + document.body.scrollTop;
 layer.style.left = x + offsetX;
 layer.style.top = y + offsetY;
 return true;
}

function DrawImage(img,width,height){
 if(DrawImage.arguments.length <= 1)
  width=height=70;
 var image=new Image();
 image.src=img.src;
 if(image.width>0 && image.height>0)
 {
   if(image.width>width)
   {
    rate=image.height/image.width;
    newHeight=rate*width;
    img.width=width;
    img.height=newHeight;
   }
 }
 if(img.height>height)
 {
  rate=image.width/image.height;
  newWidth=rate*height;
  img.height=height;
  img.width=newWidth;
 }
}

function DrawImage50(img){
 DrawImage(img,50,50);
}

function resetForm(){
 var f=document.frmsearch;
   f.Page.value = 1;
   f.ClassCode.value ='' ;
   f.SortType.value ='' ;  
   f.KeyWord.value='';
   f.Area.value='';
   f.MinPrice.value=f.MaxPrice.value='';
 return false;  
}  
function manualSearch(){
 var f=document.frmsearch;
   f.Page.value = 1;
  // f.ClassCode.value ='' ;
   f.SortType.value ='' ;  
   f.submit();
 return false;  
}
function checkCondition(obj) {
 return true;
}
function selectview(obj)
{
   var f=document.frmsearch;
   if ((obj.selectedIndex>0) && (obj.selectedIndex <7))
     f.SortType.value = obj.options[obj.selectedIndex].value;
 else if ((obj.selectedIndex>6) && (obj.selectedIndex <10))
     f.View.value = obj.options[obj.selectedIndex].value;
 else if ((obj.selectedIndex>9) && (obj.selectedIndex <13))
     f.PageSize.value = obj.options[obj.selectedIndex].value;
   f.submit();
 return false;  
}
function changeLocation(obj){
 var f=document.frmsearch;
   f.Area.value = obj.options[obj.selectedIndex].value;
   f.submit();
 return false;  
}
function changeViewMode(mode){
 var f=document.frmsearch;
   f.View.value = mode;
   f.submit();
 return false;
}
function changePage(page){
 var f=document.frmsearch;
   f.Page.value = page;
   f.submit();
 return false;
}
function changePageSize(pagesize){
 var f=document.frmsearch;
   f.Page.value = 1;
   f.PageSize.value = pagesize;  
   f.submit();
 return false;
}

function changeSortType(type){
 var f=document.frmsearch;
   f.Page.value = 1;  
   f.SortType.value = type;
   f.submit();
 return false;
}
function changeClassCode(code){
 var f=document.frmsearch;
   f.ClassCode.value = code;
   f.Page.value=1;
   f.submit();
 return false;
}

function high(which2){
 theobject=which2;
 highlighting=setInterval("highlightit(theobject)",40);
}
function low(which2){
 clearInterval(highlighting);
 which2.filters.alpha.opacity=40;
}
function highlightit(cur2){
 if (cur2.filters.alpha.opacity<100)
  cur2.filters.alpha.opacity+=5
 else if (window.highlighting)
  clearInterval(highlighting)
}

function delightit(cur2){
 if (cur2.filters.alpha.opacity>5)
  cur2.filters.alpha.opacity-=5;
 else if (window.highlighting)
   clearInterval(highlighting);
}

第三种效果：

<style type="text/css">
#zoomimg {padding:0; margin:2em auto; list-style-type:none; width:250px; height:40px;}
#zoomimg li {position:relative;display:block; float:left; margin-right:10px;width:40px; height:40px; }
#zoomimg li a {position:relative; display:block; width:40px; height:40px; background:transparent; }
#zoomimg li a img {width:100%; height:100%; border:0;}
#zoomimg li a:hover {position:absolute; left:-30px; top:-30px; width:100px; height:100px; z-index:100;}
</style>

<ul id="zoomimg">
 <li><a href="#1"><img src="images/image1.gif" alt="image 1" title="image 1" /></a></li>
 <li><a href="#2"><img src="images/image2.gif" alt="image 2" title="image 2" /></a></li>
 <li><a href="#3"><img src="images/image3.gif" alt="image 3" title="image 3" /></a></li>
 <li><a href="#4"><img src="images/image4.gif" alt="image 4" title="image 4" /></a></li>
 <li><a href="#5"><img src="images/image5.gif" alt="image 5" title="image 5" /></a></li>
</ul>

 第四种：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>鼠标经过显示突出详细</title>
<style>
<!--
#html,body{background-color:#f0f0f0;}
#tdiv{}
#tdiv div{float:left;width:252px;overflow:hidden;}
#tdiv div span {display:none;}
#tdiv div a:hover{position:absolute;display:block;background-color:#000;border:4px solid #ccc;height:320px;width:260px;padding:5px 0px 5px 10px;margin:0px;color:#fff;}
#tdiv div   a:hover span{display:block;color:#fff;}
-->
</style>
</head>
<body>
请另存为本地查看<p>
并把头部去掉<p>
<div id="tdiv">
<div><a href="http://www.soojs.com"><img src="http://img.poco.cn/photo/20070531/3024630220070531100706086_640.jpg" width="252" height="252" border="0" /><span>http://www.soojs.com></span></a></div>
<div><a href="http://www.soojs.com"><img src="http://img.poco.cn/photo/20070531/3024630220070531100706086_640.jpg" width="252" height="252" border="0" /><span>http://www.soojs.com></span></a></div>
<div><a href="http://www.soojs.com"><img src="http://img.poco.cn/photo/20070531/3024630220070531100706086_640.jpg" width="252" height="252" border="0" /><span>http://www.soojs.com></span></a></div>
<div><a href="http://www.soojs.com"><img src="http://img.poco.cn/photo/20070531/3024630220070531100706086_640.jpg" width="252" height="252" border="0" /><span>http://www.soojs.com></span></a></div>
<div><a href="http://www.soojs.com"><img src="http://img.poco.cn/photo/20070531/3024630220070531100706086_640.jpg" width="252" height="252" border="0" /><span>http://www.soojs.com></span></a></div>
<div><a href="http://www.soojs.com"><img src="http://img.poco.cn/photo/20070531/3024630220070531100706086_640.jpg" width="252" height="252" border="0" /><span>http://www.soojs.com></span></a></div>
</div>
</body>
</html>