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 ?
Cano82
0
Newbie Poster
Recommended Answers
Jump to PostHi 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 …
Jump to PostThe 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 …
Jump to PostMy mistake. Please change this code:
i.UniqueIDto the following:
i.ClientIDThen it should work. Please post back if you have any more problems.
~ mellamokb
All 9 Replies
mellamokb
8
Light Poster
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
Cano82
0
Newbie Poster
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()");
}
mellamokb
8
Light Poster
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
Cano82
0
Newbie Poster
Thank you very much
Cano82
0
Newbie Poster
I can not work the code :(. It is very urgently.
mellamokb
8
Light Poster
My mistake. Please change this code:
i.UniqueIDto the following:
i.ClientIDThen it should work. Please post back if you have any more problems.
~ mellamokb
Cano82
0
Newbie Poster
Can you upload the source anywhere? I can not work the source
mellamokb
8
Light Poster
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
Cano82
0
Newbie Poster
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.