html超链接 鼠标效果,HTML超链接鼠标在图像上

你可以做到这一点使用JavaScript ..

这将创建一个跟随你的DIV或元素悬停鼠标一个正方形。

创建这里这些内容.js文件：

var WindowVisible = null;

function WindowShow() {

this.bind = function(obj,url,height,width) {

obj.url = url;

obj.mheight = height;

obj.mwidth = width;

obj.onmouseover = function(e) {

if (WindowVisible == null) {

if (!e) e = window.event;

var tmp = document.createElement("div");

tmp.style.position = 'absolute';

tmp.style.top = parseInt(e.clientY + 15) + 'px';

tmp.style.left = parseInt(e.clientX + 15) + 'px';

var iframe = document.createElement('iframe');

iframe.src = this.url;

iframe.style.border = '0px';

iframe.style.height = parseInt(this.mheight)+'px';

iframe.style.width = parseInt(this.mwidth)+'px';

iframe.style.position = 'absolute';

iframe.style.top = '0px';

iframe.style.left = '0px';

tmp.appendChild(iframe);

tmp.style.display = 'none';

WindowVisible = tmp;

document.body.appendChild(tmp);

tmp.style.height = parseInt(this.mheight) + 'px';

tmp.style.width = parseInt(this.mwidth) + 'px';

tmp.style.display = 'block';

}

}

obj.onmouseout = function() {

if (WindowVisible != null) {

document.body.removeChild(WindowVisible);

WindowVisible = null;

}

}

obj.onmousemove = function(e) {

if (!e) e = window.event;

WindowVisible.style.top = parseInt(e.clientY + 15) + 'px';

WindowVisible.style.left = parseInt(e.clientX + 15) + 'px';

}

}

}

然后在你的HTML执行以下操作：

包含的js文件

把你的网页：

var asd = new WindowShow();

asd.bind(document.getElementById('go1'),'IMAGE URL HERE!',400,480);

这是在HTML的完全实现：

test page

div.block { width: 300px; height: 300px; background-color: red; }

iframe { border: 0px; padding: 0px; margin: 0px; }

var asd = new WindowShow();

asd.bind(document.getElementById('go1'),'IMAGE URL HERE!',400,480);

再见！