(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
ataGrid !
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:
<asp:HyperLink Runat="server" id="hypgridmoreinfo" name="hypgridmoreinfo" Runat="server" BorderWidth="0" onmouseover="return enlarge(event,'center', 730, 740)"/></TD>
This causes 2 problems:
- 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?
- 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!