How to show image on mouse over [Resolved]

Posted by Learningtorise under ASP.NET on 9/5/2013 | Points: 10 | Views : 2371 | Status : [Member] | Replies : 3

Write New Post |

Search Forums | Answered

Resolved Posts |

Un Answered Posts |

Forums Home

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/

[Resolved]

Reply | Reply with Attachment

Alert Moderator

Responses

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

0	--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

--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

0	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

0	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

Latest Posts