<a href="www.xxx.com/1.jpg>1</a>
<a href="www.xxx.com/2.jpg>2</a>
<a href="www.xxx.com/3.jpg>3</a>
<a href="www.xxx.com/4.jpg>4</a>
就一个JS,
就是当鼠标划这个链接时,把图片显示出来可以高设定高和宽,鼠标离开时隐藏,支持多浏览器,3Q
<a href="www.xxx.com/2.jpg>2</a>
<a href="www.xxx.com/3.jpg>3</a>
<a href="www.xxx.com/4.jpg>4</a>
就一个JS,
就是当鼠标划这个链接时,把图片显示出来可以高设定高和宽,鼠标离开时隐藏,支持多浏览器,3Q
$("#id").hover(function(e){
document.getElementById('pop'+y).style.display="";
},
function(){
document.getElementById('pop'+y).style.display="none";
});
<html>
<head>
<title> New Document </title>
<style type="text/css">
body a{display:block;width:40px;height:40px;}
</style>
</head><body>
<script language="javascript">function aa(e,src)
{
var s = mousePosition(e);
var div = document.getElementById('div');
div.style.top = s.y;
div.style.left = s.x;
div.style.display='block';
div.innerHTML="<img src='"+src+"'/>";
}function mousePosition(ev){
if(ev.pageX || ev.pageY){
return {x:ev.pageX, y:ev.pageY};
}
return {
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
y:ev.clientY + document.body.scrollTop - document.body.clientTop
};}
function bb(e)
{
document.getElementById('div').style.display='none';
}
</script>
<a href="www.xxx.com/1.jpg" onmouseover="aa(event,'www.xxx.com/1.jpg')" onmouseout="bb()">1</a>
<a href="www.xxx.com/2.jpg" onmouseover="aa(event,'www.xxx.com/2.jpg')" onmouseout="bb()">2</a>
<a href="www.xxx.com/3.jpg" onmouseover="aa(event,'www.xxx.com/3.jpg')" onmouseout="bb()">3</a>
<div id="div" style="display:none;border:1px solid red;width:100px;position:absolute;">sdfsdfsadf<br>dfdsf</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript">
window.onload = function(){
var img = document.createElement("img");
img.style.cssText = "display:none; position:absolute; width:200px; height:100px; border:1px solid #ddd;";
document.body.appendChild(img);
var a = document.getElementById("container").getElementsByTagName("a");
for(var i = 0; i < a.length; i++){
a[i].onmouseover = function(oEvent){
oEvent = oEvent || event;
img.style.display = "block";
img.src = this.href;
img.style.left = oEvent.clientX + 5 + "px";
img.style.top = oEvent.clientY + 5 + "px";
};
a[i].onmouseout = function(){
img.style.display = "none";
};
}
};
</script>
</head><body>
<div id="container">
<a href="http://www.baidu.com/img/logo-yy.gif" >baidu1</a>
<a href="http://www.baidu.com/img/baidu_logo.gif">baidu2</a>
<a href="http://www.google.cn/intl/zh-CN/images/logo_cn.gif">google1</a>
<a href="http://images.google.cn/intl/zh-CN_cn/images/logos/images_logo_lg.gif">google2</a>
</div>
</body>
</html>
<!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=utf-8" />
<title>无标题文档</title>
</head><body>
<a href="www.xxx.com/1.jpg">1 </a> <br /><a href="www.xxx.com/2.jpg">2 </a> <br /><a href="www.xxx.com/3.jpg">3 </a> <br /><a href="www.xxx.com/4.jpg">4 </a> <br /><script type="text/javascript">
var a=document.body.getElementsByTagName('A');
for(var i=0,ii=a.length; i<ii; i++){
a[i].v=i;
a[a[i].v].onmouseover=function(){
var img=document.createElement('IMG');
img.src=this['href'];
this.appendChild(img);
}
a[a[i].v].onmouseout=function(){
this.removeChild(this.lastChild)
}
}
</script>
</body>
</html>
{
var s = mousePosition(e);
var div = document.getElementById('div');
div.style.top = s.y;
div.style.left = s.x;
div.style.display='block';
div.innerHTML="<img src='"+src+"'/>";
}function mousePosition(ev){
if(ev.pageX || ev.pageY){
return {x:ev.pageX, y:ev.pageY};
}
return {
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
y:ev.clientY + document.body.scrollTop - document.body.clientTop
};}
function bb(e)
{
document.getElementById('div').style.display='none';
}