(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 aspataGrid !

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 aspataGrid control. Each image is created by an asp:Hyperlink control, like this:

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!