Skip to content

Instantly share code, notes, and snippets.

@hemantajax

hemantajax/image-tooltip.html

Created April 29, 2012 18:22
Show Gist options
  • Save hemantajax/2552418 to your computer and use it in GitHub Desktop.
Save hemantajax/2552418 to your computer and use it in GitHub Desktop.
Download ZIP
tooltip for image on hover
Raw
image-tooltip.html
<!doctype html>
<html>
<head>
<title>Image Tooltip</title>
<meta charset="utf-8" />
<style>
a{
border:1px solid #00f;
display: inline-block;
}
img{
width:200px;
height:200px;
border:2px solid #ddd;
}
#bigimage{
position:absolute;
border:#ff0;
width:400px;
height:400px;
}
</style>
</head>
<body>
<div id="wrapper">
<a href="http://hemantcse31.kodingen.com/img/1.jpg" title="1st image"><img src="http://hemantcse31.kodingen.com/img/1.jpg" alt="1st image" /></a>
<a href="http://hemantcse31.kodingen.com/img/2.jpg" title="2nd image"><img src="http://hemantcse31.kodingen.com/img/2.jpg" alt="2nd image" /></a>
<a href="http://hemantcse31.kodingen.com/img/3.jpg" title="3rd image"><img src="http://hemantcse31.kodingen.com/img/3.jpg" alt="3rd image" /></a>
<a href="http://hemantcse31.kodingen.com/img/4.jpg" title="4th image"><img src="http://hemantcse31.kodingen.com/img/4.jpg" alt="4th image" /></a>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
(function(){
var offsetX=10,
offsetY=10;
$("#wrapper").find("a").hover(function(e){console.log("here");
var href=$(this).attr("href");
$('<img src="'+href+'" alt="big image" id="bigimage" />').css({left:e.pageX+offsetX,top:e.pageY+offsetY}).appendTo('body');
},function(){
$("#bigimage").remove();
});
$("#wrapper").find("a").on("mousemove",function(e){
$("#bigimage").css({left:e.pageX+offsetX,top:e.pageY+offsetY});
});
})();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment