Home > ASP.Net, Jquery > Jquery to Change Image Opacity on MouseOver

Jquery to Change Image Opacity on MouseOver


Hi

try this example to use Jquery to Change Image Opacity on MouseOver

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="WithDatabase.aspx.cs" Inherits="WithDatabase" %>
<!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 runat="server">
    <title>With Gridview from Database</title>
     <style type="text/css">
    .imgOpa
    {
        opacity:1.0;
        /*filter:alpha(opacity=30);*/
    }
    </style>
    <script type="text/javascript"
     src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
    </script>
  
    <script type="text/javascript">
        $(function() {
            $('.imgOpa').each(function() {
                $(this).hover(
                    function() {
                        $(this).stop().animate({ opacity: 0.3 }, 800);
                    },
                   function() {
                       $(this).stop().animate({ opacity: 1.0 }, 800);
                   })
                });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" CellPadding="4"
            DataKeyNames="Id" DataSourceID="SqlDataSource1" ForeColor="#333333" GridLines="None">
            <RowStyle BackColor="#EFF3FB" />
            <Columns>
                <asp:TemplateField HeaderText="Picture" SortExpression="Picture">
                   
                    <ItemTemplate>
                        <asp:Image ID="Image1" runat="server" Height="70px" ImageUrl='<%# Eval("Picture", "~/News/{0}") %>'
                            Width="77px" CssClass="imgOpa"/>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
            <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
            <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
            <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
            <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
            <EditRowStyle BackColor="#2461BF" />
            <AlternatingRowStyle BackColor="White" />
        </asp:GridView>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:MobileDBConnectionString %>"
            SelectCommand="SELECT [Id], [Picture] FROM [News]"></asp:SqlDataSource>
    </div>
    </form>
</body>
</html>

Hope this helps

Good Luck

Advertisements
Categories: ASP.Net, Jquery
  1. July 14, 2011 at 11:40 pm

    Greate Code ! Thanks for share !

    Here have tutorial other about Change the style of an images . You can consult on this issue.

    http://codeoop.com/2011/07/14/change-the-style-of-an-images-with-jquery/

  2. yasserzaid
    August 3, 2011 at 2:05 pm

    @codeoop.com :- You are welcome hope my post helps you … Good Luck

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: