Javascript jquery图像悬停效果
这是我的jquery代码Javascript jquery图像悬停效果,javascript,jquery,Javascript,Jquery,这是我的jquery代码 this.imagePreview = function(){ xOffset = 8; yOffset = 20; $("a.preview").hover(function(e){ this.t = this.title; this.title = ""; var c = (this.t != "") ? "<br/>" + this.t : ""; $
this.imagePreview = function(){
xOffset = 8;
yOffset = 20;
$("a.preview").hover(function(e){
this.t = this.title;
this.title = "";
var c = (this.t != "") ? "<br/>" + this.t : "";
$("body").append(
"<p id='preview'><img src='"
+ this.href
+ "' alt='Image preview' />"
+ c
+ "</p>"
);
$("#preview")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px")
.fadeIn("fast");
},
function(){
this.title = this.t;
$("#preview").remove();
});
$("a.preview").mousemove(function(e){
$("#preview")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px");
});
};
// starting the script on page load
$(document).ready(function(){
imagePreview();
});
这一切都在这把小提琴里
(虽然我找不到适合此小提琴的图像,但此代码运行良好)
这段代码的作用是,将图像1.png悬停在另一个图像1s.png上
但由于此代码使用图像显示为
<a href="1.png" target="_blank" class="preview">
单击基础图像时,会在新窗口中打开此放大图像。。取而代之的是,我希望另一个网站将被打开,而不是这个放大的图像。。当我把网页的链接,它不显示悬停效果
所有帮助都是金色的。使用链接中的数据,而不是href 比如说
<a href=""http://www.somesite.com data="image-1s.png"><img ...></a>
HTML
<a href="1.png" target="_blank" class="preview">
<a href=""http://www.somesite.com data="image-1s.png"><img ...></a>
$("body").append("<p id='preview'><img src='"+ $(this).attr('data') +"' alt='Image preview' />
<a href="http://www.google.com" target="_blank" class="preview" data="http://upload.wikimedia.org/wikipedia/commons/thumb/1/1a/Bachalpseeflowers.jpg/300px-Bachalpseeflowers.jpg"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/3/36/Hopetoun_falls.jpg/300px-Hopetoun_falls.jpg"></a>
this.imagePreview = function(){
xOffset = 8;
yOffset = 20;
$("a.preview").hover(function(e){
this.t = this.title;
this.title = "";
var c = (this.t != "") ? "<br/>" + this.t : "";
$("body").append("<p id='preview'><img src='"+ $(this).attr('data') +"' alt='Image preview' />"+ c +"</p>");
$("#preview")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px")
.fadeIn("fast");
},
function(){
this.title = this.t;
$("#preview").remove();
});
$("a.preview").mousemove(function(e){
$("#preview")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px");
});
};
// starting the script on page load
$(document).ready(function(){
imagePreview();
});
#preview{
position:absolute;
background:#333;
padding:5px;
display:none;
color:#fff;
/*box-shadow: 4px 4px 3px rgba(103, 115, 130, 1);*/
}