Hej!Gridview och visning av bild via mouseover
Håller på med en webshop och vill att kunden via mouseover ska få upp en bild av artikeln i kundkorgen (gridview). Bilden ska sedan försvinna då musen flyttas (mouseout).
Mitt problem är att jag endast får det att fungera på första raden i gridiview.
Vad har jag missat?
Här kommer lite kod...
Förenklat ser min gridView ut såhär:
<asp:GridView id="gwKundkorg" runat="server" SkinID="GridView" AllowPaging="True" AllowSorting="True" GridLines="None" AutoGenerateColumns="False" OnRowDataBound="gwKundkorg_RowDataBound" >
<Columns>
<asp:TemplateField HeaderText="ArtNr">
<EditItemTemplate>
<asp:Label ID="lblArtNr" runat="server" Text='<%# Eval("ArtNr") %>' Width="75px"></asp:Label>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="lblArtNr" runat="server" Text='<%# Bind("ArtNr") %>' Width="75px"></asp:Label>
<div style="display:none" id="bild">
<asp:Image ID="imgMouseOver" runat="server" />
</div>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
Min code-behind ser ut såhär:
protected void gwKundkorg_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
//Plockar ut artikelnumret och söker fram rätt bildURL.
string sArtNr = ((Label)e.Row.FindControl("lblArtNr")).Text;
((System.Web.UI.WebControls.Image)e.Row.FindControl("imgMouseOver")).ImageUrl = SiteObjekt.HamtaBild(sArtNr, SiteObjekt.BildTyp.Liten, Server)[0].ToString();
e.Row.Attributes.Add("onmouseover", "showTip('bild');");
e.Row.Attributes.Add("onmouseout", "hideTip('bild');");
}
}
De två javascript funktionerna showTip och hideTip ser ut såhär:
function showTip (elementId){
var tip = document.getElementById(elementId);
tip.style.display = "block";
}
function hideTip (elementId){
var tip = document.getElementById(elementId);
tip.style.display = "none";
}