(This is not strictly speaking a skinning question, but its the closest match I could think of)

I have a module that I want to customize so that each image in a list of images, when moused over generates a floating enlarged version of the same image (e.g. a list of thumbnails which when moused over show a full size image). I know how to do this in pure HTML and Javascript, the challenge is that I only have access to the ASCX file of the module (no source code) and the ASP.NET code is rendering the images using asp:HyperLink controls withn an asp:DataGrid !

The Javascript I would normally use uses document.getElementById or document.getElementsByName to find the <IMG> then sets the SRC property of my floating image.

Here's where the problem starts:

The list of images is created by an asp:DataGrid control. Each image is created by an asp:Hyperlink control, like this:

<asp:HyperLink Runat="server" id="hypgridmoreinfo" name="hypgridmoreinfo" Runat="server" BorderWidth="0" onmouseover="return enlarge(event,'center', 730, 740)"/></TD>

This causes 2 problems:

1. The resulting HTML looks like this
   
   

   <a id="dnn_ctr1691_ProductPage_grdProducts__ctl2_hypgridmoreinfo" name="hypgridmoreinfo" onmouseover="return enlarge(event,'center', 730, 740)" href="/CriteriaInc/tabid/163/CategoryID/0/List/1/Level/a/ProductID/4/Default.aspx" style="border-width:0px;">

   <IMG src="/portals/1/image1.gif" align="" border="0">
   </a>
   
   ... so the IMG I need to retrieve the SRC of has no ID and no NAME either, so how to reference it?

2. If I could somehow reference the IMG via the <A> link, the ID has been "transformed" by DNN into a different ID than the one specified in the ASCX. The NAME has been preserved but will be the same for every image in the list.

So, is there a solution? Remember I need a solution that only involves altering the ASCX file of the module!

Thanks for this, but I am not sure how to make use of it.

Your approach is to get a reference to the grid, then loop through the hyperlinks in it and get the SRC of the IMG within each hyperlink. If I add this code to my "enlarge" function (which is called on mouseover of a particular image, and which generates the blown up image) how do I know which is the image that was just mouseover'd, i.e. when to get out of the loop?

I think what I need is some code that I can attach to the asp:hyperlink within the asp:datagrid, that passes the ID of the hyperlink to my javascript "enlarge" function.

I tried doing this:

<asp:HyperLink Runat="server" id="hypgridmoreinfo" name="hypgridmoreinfo" Runat="server" BorderWidth="0" onmouseover="return enlarge(<%=Me.hypgridmoreinfo.ClientID%>, event,'center', 730, 740)"/>

... i.e. adding an ID parameter to the enlarge function, but it looks like you can't add a <% %> block inside an ASP control.

Any more ideas? Thanks for looking at this.

I finally got it working. It was actually easier than I thought. First I added a "sourceobj" argument to my enlargeimg function for the reference to the <A> element. Then I got the reference to the <IMG> element's src using Jon's advice:

destobjimgsrc=sourceobj.childNodes[0].src

In the <asp:HyperLink> where the function is called, I used the "this" variable to pass in the reference to the <A> element:

<asp:HyperLink id="hyplistmoreinfo" Runat="server" onmouseover="return enlargeimg(this, event,'center', 300, 300)"></asp:HyperLink>