Image Tooltip using Jquery.................
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1"/>
<title>jQuery Image Tool Tips Demo - Queness</title>
<script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>
<script type="text/javascript">
// Load this script once the document is ready
$(document).ready(function () {
// Get all the thumbnail
$('div.thumbnail-item').mouseenter(function(e) {
// Calculate the position of the image tooltip
x = e.pageX - $(this).offset().left;
y = e.pageY - $(this).offset().top;
// Set the z-index of the current item,
// make sure it's greater than the rest of thumbnail items
// Set the position and display the image tooltip
$(this).css('z-index','15')
.children("div.tooltip")
.css({'top': y + 10,'left': x + 20,'display':'block'});
}).mousemove(function(e) {
// Calculate the position of the image tooltip
x = e.pageX - $(this).offset().left;
y = e.pageY - $(this).offset().top;
// This line causes the tooltip will follow the mouse pointer
$(this).children("div.tooltip").css({'top': y + 10,'left': x + 20});
}).mouseleave(function() {
// Reset the z-index and hide the image tooltip
$(this).css('z-index','1')
.children("div.tooltip")
.animate({"opacity": "hide"}, "fast");
});
});
</script>
<style>
.thumbnail-item {
/* position relative so that we can use position absolute for the tooltip */
position: relative;
float: left;
margin: 0px 5px;
}
.thumbnail-item a {
display: block;
}
.thumbnail-item img.thumbnail {
border:3px solid #ccc;
}
.tooltip {
/* by default, hide it */
display: none;
/* allow us to move the tooltip */
position: absolute;
/* align the image properly */
padding: 8px 0 0 8px;
}
.tooltip span.overlay {
/* the png image, need ie6 hack though */
background: url(images/overlay.png) no-repeat;
/* put this overlay on the top of the tooltip image */
position: absolute;
top: 0px;
left: 0px;
display: block;
width: 350px;
height: 200px;
}
</style>
</head>
<body>
<div class="thumbnail-item">
<a href="#"><img src="images/small1.jpg" class="thumbnail"/></a>
<div class="tooltip">
<img src="images/big1.jpg" alt="" width="330" height="185" />
<span class="overlay"></span>
</div>
</div>
</div>
<div class="thumbnail-item">
<a href="#"><img src="images/small2.jpg" class="thumbnail"/></a>
<div class="tooltip">
<img src="images/big2.jpg" alt="" width="330" height="185" />
<span class="overlay"></span>
</div>
</div>
<div class="thumbnail-item">
<a href="#"><img src="images/small3.jpg" class="thumbnail"/></a>
<div class="tooltip">
<img src="images/big3.jpg" alt="" width="330" height="185" />
<span class="overlay"></span>
</div>
</div>
<div class="clear"></div>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1"/>
<title>jQuery Image Tool Tips Demo - Queness</title>
<script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>
<script type="text/javascript">
// Load this script once the document is ready
$(document).ready(function () {
// Get all the thumbnail
$('div.thumbnail-item').mouseenter(function(e) {
// Calculate the position of the image tooltip
x = e.pageX - $(this).offset().left;
y = e.pageY - $(this).offset().top;
// Set the z-index of the current item,
// make sure it's greater than the rest of thumbnail items
// Set the position and display the image tooltip
$(this).css('z-index','15')
.children("div.tooltip")
.css({'top': y + 10,'left': x + 20,'display':'block'});
}).mousemove(function(e) {
// Calculate the position of the image tooltip
x = e.pageX - $(this).offset().left;
y = e.pageY - $(this).offset().top;
// This line causes the tooltip will follow the mouse pointer
$(this).children("div.tooltip").css({'top': y + 10,'left': x + 20});
}).mouseleave(function() {
// Reset the z-index and hide the image tooltip
$(this).css('z-index','1')
.children("div.tooltip")
.animate({"opacity": "hide"}, "fast");
});
});
</script>
<style>
.thumbnail-item {
/* position relative so that we can use position absolute for the tooltip */
position: relative;
float: left;
margin: 0px 5px;
}
.thumbnail-item a {
display: block;
}
.thumbnail-item img.thumbnail {
border:3px solid #ccc;
}
.tooltip {
/* by default, hide it */
display: none;
/* allow us to move the tooltip */
position: absolute;
/* align the image properly */
padding: 8px 0 0 8px;
}
.tooltip span.overlay {
/* the png image, need ie6 hack though */
background: url(images/overlay.png) no-repeat;
/* put this overlay on the top of the tooltip image */
position: absolute;
top: 0px;
left: 0px;
display: block;
width: 350px;
height: 200px;
}
</style>
</head>
<body>
<div class="thumbnail-item">
<a href="#"><img src="images/small1.jpg" class="thumbnail"/></a>
<div class="tooltip">
<img src="images/big1.jpg" alt="" width="330" height="185" />
<span class="overlay"></span>
</div>
</div>
</div>
<div class="thumbnail-item">
<a href="#"><img src="images/small2.jpg" class="thumbnail"/></a>
<div class="tooltip">
<img src="images/big2.jpg" alt="" width="330" height="185" />
<span class="overlay"></span>
</div>
</div>
<div class="thumbnail-item">
<a href="#"><img src="images/small3.jpg" class="thumbnail"/></a>
<div class="tooltip">
<img src="images/big3.jpg" alt="" width="330" height="185" />
<span class="overlay"></span>
</div>
</div>
<div class="clear"></div>
</body>
</html>
Category: JQUERY
