Pages

Wednesday 22 May 2013

How To Show Hidden Content on Mouse Over on Top of Element using jQuery in c# .net

 How To Show Hidden Content on Mouse Over on Top of Element using jQuery in c# .net

Program:

.Aspx File

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!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>jQuery ContentHover Plugin Examples</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="js/jquery.contenthover.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $('#d1').contenthover({
                overlay_background: '#000',
                overlay_opacity: 0.8
            });
            $('#d2').contenthover({
                effect: 'slide',
                slide_speed: 300,
                overlay_background: '#000',
                overlay_opacity: 0.8
            });
            $('#d3').contenthover({
                overlay_width: 270,
                overlay_height: 180,
                effect: 'slide',
                slide_direction: 'right',
                overlay_x_position: 'right',
                overlay_y_position: 'center',
                overlay_background: '#000',
                overlay_opacity: 0.8
            });
            $('#d4').contenthover({
                hover_class: 'mybackground'
            });
        })
    </script>
    <style type="text/css">
        body{ font-family:Verdana; font-size:10pt}
        .mybackground { background:url(Images/transparent_bg.png); }
    .contenthover { padding:20px 20px 10px 20px; }
.contenthover, .contenthover h3, contenthover a { color:#fff; }
.contenthover h3, .contenthover p { margin:0 0 10px 0; line-height:1.4em; padding:0; }
.contenthover a.mybutton { display:block; float:left; padding:5px 10px; background:#3c9632; color:#fff; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; }
.contenthover a.mybutton:hover { background:#34742d }
    </style>

</head>
<body>
    <form id="form1" runat="server">

    <table>
    <tr>
    <td>
    <img id="d1" src="Images/Hydrangeas.jpg" width="300" height="240" alt="demo" />
    <div class="contenthover">
    <h3>fantasyaspnet.blogspot.com</h3>
    <p>Learn Asp.net</p>
    <p><a href="http://fantasyaspnet.blogspot.in/" class="mybutton">Click Hear</a></p>
</div>
    </td>
    <td>
<img id="d2" src="Images/Jellyfish.jpg" width="300" height="240" alt="demo"/>
 <div class="contenthover">
    <h3>fantasyaspnet.blogspot.com</h3>
    <p>Learn Asp.net</p>
    <p><a href="http://fantasyaspnet.blogspot.in/" class="mybutton">Click Hear</a></p>
</div>
    </td>
    </tr>
    <tr>
    <td>
    <img id="d3" src="Images/Jellyfish.jpg" width="300" height="240" alt="demo" />
    <div class="contenthover">
    <h3>fantasyaspnet.blogspot.com</h3>
    <p>Learn Asp.net</p>
    <p><a href="http://fantasyaspnet.blogspot.in/" class="mybutton">Click Hear</a></p>
</div>
    </td>
    <td>
    <img id="d4" src="Images/Hydrangeas.jpg" width="300" height="240" alt="demo" />
    <div class="contenthover">
    <h3>fantasyaspnet.blogspot.com</h3>
    <p>Learn Asp.net</p>
    <p><a href="http://fantasyaspnet.blogspot.in/" class="mybutton">Click Hear</a></p>
</div>
    </td>
    </tr>
    </table>
    </form>
</body>
</html>

Aspx.cs

using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
}

Demo:

 How To Show Hidden Content on Mouse Over on Top of Element using jQuery in c# .net
 How To Show Hidden Content on Mouse Over on Top of Element using jQuery in c# .net

No comments:

Post a Comment