100分求鼠标移过出现大图！

http://www.cssrain.cn/article.asp?id=29

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

download:  http://www.cssrain.cn/demo/hoverbox/hoverbox.rar
<script type="text/javascript">
//<![CDATA[
function resizeImg(img){try{if(img.offsetWidth>0){if(img.offsetWidth>img.height){img.width=img.height;img.removeAttribute('height');}}else{setTimeout(function() {resizeImg(img);},50);}}catch(ex){;}}
var imgSiteUrl = 'http://st.youa.baidu.com/resource/images/mall';
var webim_site_url = 'http://web.im.baidu.com';
//]]>
</script>
<div class='img'><a target='_blank' href="http://youa.baidu.com/item/bed18c1fbd6d85e0ffeb69de"><img onload='resizeImg(this);' height='75' src='http://img.mall.baidu.com/cccccc/sabpic/item/d9278df6f3afa1d98c1437fd.jpg'></a><img src="http://st.youa.baidu.com/resource/images/mall/blank.gif" class="blank"></div>
<style>
#demo{overflow:hidden;width:120px;text-align:center;padding:10px;}
#demo img{border:none;width:100px;height:100px;border:5px solid #f4f4f4}
#enlarge_images{position:absolute;display:none;z-index:2;border:5px solid #f4f4f4}
</style>
<div id="demo" style="overflow:hidden;width:120px;text-align:center;padding:10px">
<img src="http://www.makewing.com/images/uppic/200801101244190.jpg">
</div>
<div id="enlarge_images"></div>
<script>
var demo = document.getElementById("demo");
var gg = demo.getElementsByTagName("img");
var ei = document.getElementById("enlarge_images");
for(i=0; i<gg.length; i++){
var ts = gg[i];
ts.onmousemove = function(event){
  event = event || window.event;
  ei.style.display = "block";
  ei.innerHTML = '<img src="' + this.src + '" />';
  ei.style.top  = document.body.scrollTop + event.clientY + 10 + "px";
  ei.style.left = document.body.scrollLeft + event.clientX + 10 + "px";
}
ts.onmouseout = function(){
  ei.innerHTML = "";
  ei.style.display = "none";
}
ts.onclick = function(){
  window.open( this.src );
}
}
</script>
这样的效果不用ajax就可以实现了,5楼就是一个例子,只要控制好Tip层和层内img的src的值就可以了,用ajax反而增加服务端程序的复杂度
http://topic.csdn.net/u/20090331/10/0ed3783a-83ce-4470-9dd7-e6d1275785f7.html
#16
现在不是都是用Jquery这类来实现的吗？不需要ajax那么复杂
这个分好挣,说需要用ajax,Jquery等都需要去学习一下js基础了
天哪jQuery就是ajax的一个框架，8楼怎么说不需要ajax
<html>
<head>
<title>for</title>
<script language="javascript"></script>
</head><body>
<img src="1.jpg" name="cat" width="800" height="600" onMouseOver="src='2.jpg'" onMouseOut="src='3.jpg'" onMouseUp="src='4.jpg'" onMouseDown="src='5.jpg'">
</body>
</html>
把这段代码保存到一个HTML页面中。然后加入对应的jpg图片就能看到效果。
同样，可以调用一段JS来实现调整图片的大小。
加载所有的图片
显示小图。隐藏大图小图的哪里，mouseover 显示大图。
mouseout 大图隐藏
误导，
小图的 mouseover 隐藏小图、显示大图。大图的 mouseout 隐藏大图、显示小图
js都不用，纯css就可以实现，:hover伪属性，各浏览器兼容。