How to show image on mouse over [Resolved]

Posted by Learningtorise under ASP.NET on 9/5/2013 | Points: 10 | Views : 1801 | Status : [Member] | Replies : 3
I want to show many images on MouseOver, like tooltip...

For example:
When checking out a product on Flipkart, when you move your mouse over product's image, there an enlarged image projected as tool tip on Mouse Hover.

I don't want to enlarge it.

Just show an image.

http://hashtagakash.wordpress.com/


Responses

Posted by: Bandi on: 9/5/2013 [Member] [MVP] Platinum | Points: 50

Up
0
Down

Resolved
--Try this code....
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ImageTooltip.aspx.cs" Inherits="ImageTooltipOverMouseClick.ImageTooltip" %>


<!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 id="Head1" runat="server">
<title>Untitled Page</title>
<script type="text/javascript" language="javascript">


function ShowToolTip(con) {
document.getElementById("div_img").style.visibility = "visible"; document.getElementById("img_tool").src = con.src;

document.getElementById("div_img").style.left = event.clientX;
document.getElementById("div_img").style.top = event.clientY;

document.getElementById("div_img").style.zIndex = "0";
}
function hideToolTip() {
document.getElementById("div_img").style.visibility = "hidden";
}

</script>


</head>
<body>

<form id="form1" runat="server">

<div>

<asp:Image ID="Image1" runat="server" ImageUrl="~/sunset.jpg" Height="283px" Width="468px" onmouseover="ShowToolTip(this);" onmouseout="hideToolTip();"/>

<div id="div_img" style="height:100px;width:100px;border:solid 1px black;position:absolute;visibility:hidden;">

<img id="img_tool" height="100%" width="100%"/>

</div>

</div>
</form>
</body>

</html>

Reference: http://www.dynamicdrive.com/dynamicindex4/imagetooltip.htm

Mark This Response as Answer
--
Chandu
http://www.dotnetfunda.com/images/dnfmvp.gif

Learningtorise, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Learningtorise on: 9/5/2013 [Member] Starter | Points: 25

Up
0
Down
Hey Bandi, nicely done !!!

Tried and working great! Thanks Mate!

http://hashtagakash.wordpress.com/

Learningtorise, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Learningtorise on: 9/5/2013 [Member] Starter | Points: 25

Up
0
Down
Although, i got another from JQuery:

http://jqueryui.com/tooltip/#custom-content

Cheers ;)

http://hashtagakash.wordpress.com/

Learningtorise, if this helps please login to Mark As Answer. | Alert Moderator

Login to post response