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

Jquery to Change Image Opacity on MouseOver


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">
    <script type="text/javascript"
    <script type="text/javascript">
        $(function() {
            $('.imgOpa').each(function() {
                    function() {
                        $(this).stop().animate({ opacity: 0.3 }, 800);
                   function() {
                       $(this).stop().animate({ opacity: 1.0 }, 800);
    <form id="form1" runat="server">
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" CellPadding="4"
            DataKeyNames="Id" DataSourceID="SqlDataSource1" ForeColor="#333333" GridLines="None">
            <RowStyle BackColor="#EFF3FB" />
                <asp:TemplateField HeaderText="Picture" SortExpression="Picture">
                        <asp:Image ID="Image1" runat="server" Height="70px" ImageUrl='<%# Eval("Picture", "~/News/{0}") %>'
                            Width="77px" CssClass="imgOpa"/>
            <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:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:MobileDBConnectionString %>"
            SelectCommand="SELECT [Id], [Picture] FROM [News]"></asp:SqlDataSource>

Hope this helps

Good Luck

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.


  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 )

Google+ photo

You are commenting using your Google+ 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 )


Connecting to %s

%d bloggers like this: