Manipulate hyperlinked image with JavaScript

[nwruiz]

Hello,

I currently have written DHTML code to make an image float from off the top of the screen to somewhere in the middle. I posted this code in thread216-1083937.

My challenge has been modifying the code to work with ASP.NET, namely, by replacing the HTML code with the proper ASP tags. Since I am new to ASP.NET, I do not know how to manipulate an image in the same manner. What I need to do is make a hyperlinked image that does the float and fade action I have implemented in my code. Microsoft is foiling my plans!

Here is the tag I am currently trying to use to create a hyperlinked image:

<asp:HyperLink id="SurveyLink" runat="server" ImageUrl="Images/takeasurvey_flyout.jpg" CssClass="dance">HyperLink</asp:HyperLink>

The problem is that I can't use document.getElementById("SurveyLink") in my JavaScript code to make the image fade (it gives an error stating: "document.getElementById(...).filters.alpha is null or not an object". Actually, the JavaScript doesn't even move the hyperlinked image at all.

I am thinking that the hyperlink asp tag I use doesn't support the manipulation I am trying to do? My question is, what tag should I use to get my desired effect?

Nick Ruiz
CO-OP Intern, PPL Electric Utilities
Webmaster, DealMerchant.net

http://www.dealmerchant.net

 

[ca8msm]

If it's just an image you are trying to display, you should use the image control:

<asp:Image id="Image1" runat="server" ImageUrl="myimage.jpg"></asp:Image>

____________________________________________________________

Need help finding an answer?

Try the Search Facility or read FAQ222-2244 on how to get better results.

 

[vbkris]

what code HTML code does the control generate???

Known is handfull, Unknown is worldfull

 

[KnotGoblin]

<img>

pure html tags like all asp .net controls

just nest that images inside some hyperlink tags

 

[nwruiz]

Instead of placing the image url inside the ImageUrl property of the hyperlink tag, I entered the following:
<img src="..." id="SurveyImage" border="0" class="dance"/>

However, this still does not work. I updated the id reference in my JavaScript to point to "SurveyImage", but the location of the image is still not being manipulated by the showImage() function. Also, I still have that "document.getElementById(...).filters.alpha is null or not an object" error. It also seems like the CSS is being overwritten, or at least ignored, by the server. Any other ideas?

Nick Ruiz
CO-OP Intern, PPL Electric Utilities
Webmaster, DealMerchant.net

http://www.dealmerchant.net

 

[KnotGoblin]

depending on where you are using the image (say, a datagrid), the id may be different on the client side.
Some times you have to get the clientID property of the element and insert it in the javascript.

Fo example: here is a javascript i used to set the focus on a textbox that had a different client-side Id:

'get reference to textbox
Dim tbSearch As TextBox
tbSearch = Me.txtPartSearch

'emit script to set focus and select the search text box 
RegisterStartupScript("JSfocusPartSearch", _
& "<script language=""JavaScript"">" & vbCrLf _
& vbTab & "if(document.getElementById(""tblSearch""))" & vbCrLf _
& vbTab & "{" & vbCrLf _
& vbTab & vbTab & "document.getElementById(""" & tbSearch.ClientID & """).focus();" & vbCrLf _
& vbTab & vbTab & "document.getElementById(""" & tbSearch.ClientID & """).select();" & vbCrLf _
& vbTab & "}" & vbCrLf _
& "<" & "/script>")

 

[KnotGoblin]

oh yeah.

'view source' and see if there is a different id before you go the trouble of doing the above.

-jer

 

[nwruiz]

I "view source"d the code and found the line here:

<a id="SurveyLink" href="Survey/SurveyWindowed.aspx"><img src="Images/takeasurvey_flyout.jpg" class="dance" id="SurveyImage" border="0"/></a></P>

The id is still "SurveyImage". And to verify with my javascript code,

var id = "SurveyImage";   // Image object's id

I use that variable to access the object each time. So, I'm still at a loss.

Nick Ruiz
CO-OP Intern, PPL Electric Utilities
Webmaster, DealMerchant.net

http://www.dealmerchant.net

 

[KnotGoblin]

all i can say is that you may find better help in the javascript at this point.

javascript forum:
forum216

-Jer

 

[nwruiz]

I figured out the problem. Since I was using the Page_Load subroutine, the JavaScript function was running before the object was initialized on the page. To get around this, I separated the JavaScript entirely from the ASP.NET code. Thanks for your help.

Nick Ruiz
CO-OP Intern, PPL Electric Utilities
Webmaster, DealMerchant.net

http://www.dealmerchant.net

 

[KnotGoblin]

Good Job! Solved your own problem! ;-) I had a similiar problem the other day.

if you are adding the code in your page load event, i believe is you use the RegisterStartupScript() function it will tack on the code at the end so that it will run just after all your page elements are loaded.

-Jer

 

[nwruiz]

Yeah, I had been using RegisterStartupScript() before. Haha, all that JS invocation inside ASP.NET was making my code sloppy anyway. Thanks again for your help.

Nick Ruiz
CO-OP Intern, PPL Electric Utilities
Webmaster, DealMerchant.net

http://www.dealmerchant.net