this is my jquery code
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();
});
this is html code
<a href="1.png" target="_blank" class="preview"><img src="1s.png"></a>
this is css code
#preview{
position: absolute;
background: #333;
padding: 5px;
display: none;
color: #fff;
}
all this is in this fiddle http://jsfiddle.net/56wk9/ (though i could not find images to fit in this fiddle this code is working fine)
what this code does, it displays an image 1.png on hover on another image 1s.png
but since this code use the image to be displayed as
<a href="1.png" target="_blank" class="preview">
on clicking the base image it opens this enlarged image in a new window.. what instead i want that another website shall be opened not this enlarged image.. when i put the link of webpage it does not show hover effect.
all help is golden.
Use data in your link instead of the href.
For example
<a href=""http://www.somesite.com data="image-1s.png"><img ...></a>
Then, instead of using the this.href
use the data
$("body").append("<p id='preview'><img src='"+ $(this).attr('data') +"' alt='Image preview' />
HTML
<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>
Javascript
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();
});
CSS
#preview{
position:absolute;
background:#333;
padding:5px;
display:none;
color:#fff;
/*box-shadow: 4px 4px 3px rgba(103, 115, 130, 1);*/
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.