I listed top 5 data by gridview. I use itemtemplate and hyperlink for them. An Idditon I have an Image. When I mouse over on hyperlink the image will be change. How can it ?

Hi Cano82,

You need to add some javascript in the "onMouseOver" event of the hyperlink that changes the image. Here is an example of a link and image, where mousing over the link changes the source of the image, and mousing out of the link changes the image back to the original:

<html>
    <head>
        <title>(Your title here)</title>
        <script type="text/javascript">
        <!--
        
            function changeImage(theElement, theNewImage)
            {
                document.getElementById(theElement).src = theNewImage;
            }
        
        // -->
        </script>
    </head>
    <body>
    
        <asp:HyperLink ID="HyperLink1" runat="server" Text="abc" NavigateUrl="~/anotherPage.aspx" onmouseover="changeImage('theImage', 'images/image2.jpg');" onmouseout="changeImage('theImage', 'images/image1.jpg');"></asp:HyperLink>
        <img id="theImage" src="images/image1.jpg" />
    
    </body>
</html>

~ mellamokb

I take this error: The server tag is not well formed.

I wrote this code:

<ItemTemplate>
<asp:HyperLink ID="HyperLinkMS" runat="server" Text='<%# Eval("Header") %>' onmouseover="changeImage('theImage', '<%# Eval("Picture") %>)';" />


</ItemTemplate>


and in code behind:


protected void Page_Load(object sender, EventArgs e)
{
HyperLink hp = (HyperLink)GridView1.FindControl("HyperLinkMS");
hp.Attributes.Add("onmouseover", "changeImage()");


}

The onMouseOver attribute is not part of the server-side tag, so it doesn't support DataBinding (<%# Eval("Picture") %>). However, you can use the GridView's RowDataBound event to access each HyperLink separately and set their onMouseOver attributes to the correct value as follows:

---- myPage.aspx ----

<asp:GridView .... OnRowDataBound="GridView1_RowDataBound">
...
  <ItemTemplate>
    <asp:HyperLink ID="HyperLinkMS" runat="server" Text='<%# Eval("Header") %>' />
    <asp:Image ID="ImageMS" runat="server" ImageUrl='<%# Eval("Picture") %>' />
  </ItemTemplate>
...
</asp:GridView>

---- myPage.aspx.cs ----

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
    {

        if (e.Row.DataItem != null)
        {
            DataRowView drv = (DataRowView)e.Row.DataItem;
            HyperLink h = (HyperLink)e.Row.FindControl("HyperLinkMS");
            Image i = (Image)e.Row.FindControl("ImageMS");
            h.Attributes.Add("onmouseover", "changeImage('" + i.UniqueID + "', '" +
                 drv["PictureMouseOver"].ToString() + "');");
        }

    }

~ mellamokb

Thank you very much

I can not work the code :(. It is very urgently.

My mistake. Please change this code:

i.UniqueID

to the following:

i.ClientID

Then it should work. Please post back if you have any more problems.

~ mellamokb

Can you upload the source anywhere? I can not work the source

My simplest script that works:

Page source:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="test.aspx.cs" Inherits="test" %>
<html>
    <head>
        <script type="text/javascript">
        <!--
        
            function changeImage(theElement, theNewImage)
            {
                document.getElementById(theElement).src = theNewImage;
            }
        
        // -->
        </script>
    </head>
    
    <body>
        <form runat="server">
        <asp:GridView ID="GridView1" runat="server" OnRowDataBound="GridView1_RowDataBound">
            <Columns>
                <asp:TemplateField>
                      <ItemTemplate>
                            <asp:HyperLink ID="HyperLinkMS" runat="server" Text='<%# Eval("Header") %>' NavigateUrl='<%# Eval("Link") %>' />
                            <asp:Image ID="ImageMS" runat="server" ImageUrl='<%# Eval("Picture") %>' />
                      </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>
        </form>
    </body>
</html>

code behind:

using System;
using System.Data;
using System.Data.OleDb;
using System.Configuration;
using System.Collections;
using System.Collections.Specialized;
using System.Reflection;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class test : System.Web.UI.Page
{

    protected void Page_Load(object sender, EventArgs e)
    {

        DataTable dt = new DataTable();
        dt.Columns.Add("Header");
        dt.Columns.Add("Picture");
        dt.Columns.Add("PictureMouseOver");

        dt.Rows.Add("Test 1", "images/cart.jpg", "images/filter.jpg");
        dt.Rows.Add("Test 2", "images/noFilter.jpg", "images/AddToCart.gif");

        GridView1.DataSource = dt;
        GridView1.DataBind();

    }

    protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
    {

        if (e.Row.DataItem != null)
        {
            DataRowView drv = (DataRowView)e.Row.DataItem;
            HyperLink h = (HyperLink)e.Row.FindControl("HyperLinkMS");
            Image i = (Image)e.Row.FindControl("ImageMS");
            h.Attributes.Add("onmouseover", "changeImage('" + i.ClientID + "', '" +
                 drv["PictureMouseOver"].ToString() + "');");
        }

    }

}

You need to adjust the field names to suit your datasource, and you need to adjust the databinding code to wherever your data comes from.

~ mellamokb

Thank you very much mellamokb .

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.