reference image height

I wanted to zoom in on an image on a mouseover using javascript by changing the image height and width.

I have a asp site master with a contentplaceholder on my default page which contains Image1.

I know this can be done but I am not sure of the best way to do this being new at javascript?
kperelmanAsked:
Who is Participating?
 
AmickCommented:
The div=null indicates that you aren't receiving a handle from get(ctl_id).

The question was posted in the javascript section, and although  BigDaddy and I provided an appropriate javascript response in the first two postings, this is really an ASP question.

Clearly this can be done, but I don't have the resources loaded on my machine to explore the ASP issues.  I would suggest that you summarize the things that have been tried in this thread with sufficient detail that you don't have to cover the same ground again, close this question, and ask it again in the ASP zone. The alternative would be to request the moderators add this thread to the ASP zone.

I'm sorry I couldn't help.
0
 
Big MontySenior Web Developer / CEO of ExchangeTree.org Commented:
var theHeight = document.getElementById('Image1').height;
0
 
AmickCommented:
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
kperelmanAuthor Commented:
If I use document.getElementById('Image1').height="100" and if the image is on my master page iI can get it to work fine.

If I move image1 to the default page content placeholder the javascript does not work.  

So my question is how do I pass the image1 control from the default page content placeholder to the master page where the javascript is located?
0
 
Big MontySenior Web Developer / CEO of ExchangeTree.org Commented:
whats the ID of Image1 after you move it to the default page (you can see it when you view source)?
0
 
kperelmanAuthor Commented:
The name of my contentholder

MainContent_Image1
0
 
Big MontySenior Web Developer / CEO of ExchangeTree.org Commented:
check out #5 on this page: http://www.dotnetcurry.com/ShowArticle.aspx?ID=273

so maybe this'll work:
document.getElementById('<%= Page.Master.FindControl("MainContent_Image1").FindControl("Image1").ClientID %>').height="100"
0
 
kperelmanAuthor Commented:
Two things,

First the code caused this error: NullReferenceException was unhandled by user code
Second, I want to pass the reference to the master page so I do not have to hard code maincontent_image1 and image1
0
 
AmickCommented:
Why don't you create a function which accepts an imagename as a parameter:
<html>
<head>
<script type="text/javascript">
function changeSize(target)
{
document.getElementById(target).width= document.getElementById(target).width * 2;
document.getElementById(target).height=document.getElementById(target).height * 2;


}
</script>
</head>
<body>

<div id="maincontent">
<img id="image1" src="compman.gif" width="107" height="98" />
<br /><br />
<input type="button" onclick="changeSize('image1')" value="Change size of image" />
</div>
</body>
</html>

Open in new window

0
 
kperelmanAuthor Commented:
Amick:

This is exactly what I was looking to do.  And if the image is on the master page this works fine.

But I believe due to referencing it does not work if the image1 is in the contentplaceholder.  I do not know what the onclick="" value should be?
0
 
AmickCommented:
You might want to look at the code from the client side as that is where javascript runs, the name is probably not what you're expecting.

This discussion may be helpful to you: http://www.velocityreviews.com/forums/t312007-contentplaceholder-and-javascript.html

and to some extent this may help too:http://www.vbforums.com/showthread.php?t=541499
0
 
kperelmanAuthor Commented:
Amick:

Thanks that helped and it almost works ..

Two things,

In my simple snippet, the get_elementbyid('maincontent_image2') worked.  When I moved it to my site it added ctl00_ before 'maincontent_image2' (when I view it under the source).  Where is the ctl00 coming from since I did not name any control ctl00?

Second, if I use height= and width= in my asp:image tag the javascript does not work.  If I remove it, the script works fine. I need to set the size when the page first renders.  Do you know why I cannot use the height and width in the tag?

0
 
AmickCommented:
On the first issue, ASP is providing the ct00 tag,

On the second, you might try something like this. My syntax may be off because I don't have ASP on this box but  check this link for details on syntax and usage.

<script type="text/javascript">
function ResizeElementInControlContentPage(contentHolder,controlName) {
var target = document.getElementById('<%= Page.Master.FindControl(contentHolder).FindControl(controlName).ClientID %>');
 
    target.height = "100px";                

}
 /script>

Open in new window

0
 
kperelmanAuthor Commented:
Why am I getting a compiler error on te  document.getE... line?

I simplified the code to try to resolve the error but was not able to do so.

Compiler Error Message: BC30451: 'mc' is not declared. It may be inaccessible due to its protection level.

Source Error:
 
      function zoomin() {
           var mc = "MainContent";
           var c_id = "Image2";
           document.getElementById('<%= Page.Master.FindControl(mc).FindControl(c_id).ClientID %>').height = "400";
       }
0
 
AmickCommented:
0
 
kperelmanAuthor Commented:
Not sure I understand the article.

It seems the complier does not like the variables being used in the <% %>.

So is this just a syntax issue?  Can you get the script I pasted above to compile clean?
0
 
AmickCommented:
I don't have asp on this box, so I can't compile, but it appears that we need to go back to literals because the ASP code isn't seeing the JavaScript variables.

Try it this way:
      function zoomin() {
           document.getElementById('<%= Page.Master.FindControl(MainContent).FindControl(Image2).ClientID %>').height = "400";
       } 

Open in new window





BTW, I see that MS has taken down their sample code related to FindControl due to script exploits.
0
 
kperelmanAuthor Commented:
No this does not compiler clean either.  It does not like the references to maincontent or image2
0
 
AmickCommented:
@The_Big_Daddy - do you have any additional suggestions for kperelman?  Without setting up an ASP test environment, I think I'm not going to be more help.

@kperelman, An alternative would be to go with an entirely different approach.

A JavaScript / jQuery solution is discussed on this page. Several of the reader contributions on the issue seem valuable as well.

This article discusses ASP.NET Ajax shortcut functions.

0
 
kperelmanAuthor Commented:
I like the AJAX article.  I think I can get what I need.

Based on this I have a syntax javascript question.  If I have a function

function zoomin() {
            var div = $get('<%= image2.ClientID %>')
            div.height = "400";}

and the image tag:

   <asp:Image ID="Image2" runat="server"  onmouseover="zoomin();" />

How do I change this to get this to work: onmouseover="smi('<%= Image2.ClientID %>');"

I tried this but it does not work:
function zoomin(ctl_id) {
            var div = $get(ctl_id)
            div.height = "400";}

but get the message: Microsoft JScript runtime error: 'null' is null or not an object at the div line?
0
 
AmickCommented:
It seems as if you aren't getting a return from $get.
If you run this, do you see anything intelligent at alert(div)?

function zoomin(ctl_id) {
            var div = $get(ctl_id)
            alert(div);
            div.height = "400";
            }

Open in new window


Were you able to successfully run the examples from the article?
0
 
kperelmanAuthor Commented:
The alert says div = null

Also to recap, my image is in a contentplaceholder (but the javascript is within the contentplaceholder) on my default page for my master page.

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"/>
    <script language="javascript" type="text/javascript">
        function zoomin(ctl_id) {
            var div = $get(ctl_id)
            alert(div);
            div.height = "400";
        }
    </script>
    <asp:Image ID="Image2" runat="server"  onmouseover="zoomin('<%= Image2.ClientID %>');" />
</asp:Content>
0
 
kperelmanAuthor Commented:
Thanks for trying.  

I will repost in the asp zone.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.