How to show text on image on mouse hover using css and javascript
In this article, we are populating the text on image
on mouse hover. Many time we want to show the information of image so this code
will be help you
Design:-
Source Code:-
<%@
Page Language="C#" AutoEventWireup="true" CodeFile="imagehovecss.aspx.cs" Inherits="imagehovecss"
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.info
{
background-color:
Black;
filter:
alpha(opacity=80);
opacity:
0.6;
position:
absolute;
display:
block;
color:
White;
font-family:
Arial;
font-size:
10pt;
}
</style>
</head>
<body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function
() {
var
info = $("#info");
if
(info.length == 0) {
info = $("<span />").addClass("info");
$("body").append(info);
}
info.hide();
$(".hover_text").bind("mouseenter", function
() {
var
p = GetScreenCordinates(this);
info.html(this.alt);
info.show();
info.css("width", $(this).width());
info.css({ "left": p.x, "top":
p.y + this.offsetHeight - info[0].offsetHeight
});
});
$(".hover_text").bind("mouseleave", function
() {
info.hide();
});
});
function
GetScreenCordinates(obj) {
var
p = {};
p.x = obj.offsetLeft;
p.y = obj.offsetTop;
while
(obj.offsetParent) {
p.x = p.x +
obj.offsetParent.offsetLeft;
p.y = p.y +
obj.offsetParent.offsetTop;
if
(obj == document.getElementsByTagName("body")[0])
{
break;
}
else
{
obj = obj.offsetParent;
}
}
return
p;
}
</script>
<img src="codesolutions.png" style="width:450px;" class="hover_text"
alt="Code Solution
refers to improve your code skills. you can also learn many theoretical
question they will be help in interview time." />
</body>
</html>
Out-put:-
For more:-
How to show text on image on mouse hover using css and javascript
Reviewed by NEERAJ SRIVASTAVA
on
4:14:00 PM
Rating:
Reviewed by NEERAJ SRIVASTAVA
on
4:14:00 PM
Rating:
No comments: