treeleaf20 Posted October 30, 2009 Share Posted October 30, 2009 All, I'm trying to resize some images when the page loads and this works fine. However when I try and rollover them it doesn't show anything. Here is the code: <html> <script> function resizeAll( ) { var divs = document.getElementsByTagName("div"); for ( var d = 0; d < divs.length; ++d ) { var div = divs[d]; if ( div.className == "fn-area" ) { divid = divs[d].getAttribute("id"); imgid = "Img" + divid; var Div1Width, Div1Height; Div1Width = document.getElementById(divid).offsetWidth; Div1Height = document.getElementById(divid).offsetHeight; document.getElementById(imgid).style.width = Div1Width; document.getElementById(imgid).style.height = Div1Height; } } } </script> <head> </head> <body onLoad="resizeAll()"> <div id="Div1" class="fn-area" style="width:100px;height:100px; border:1px solid black;" onmouseover="this.getElementsById('ImgDiv1').style.display='block';" onmouseuut="this.getElementsById('ImgDiv1').style.display='none';"> <img id="ImgDiv1" src="fnclientlib/styles/artwork/stamp5.gif" style="display:none"/> </div> <div id="Div2" class="fn-area" style="width:300px;height:300px; border:1px solid black;" onmouseover="this.getElementsById('ImgDiv2').style.display='block';" onmouseout="this.getElementsById('ImgDiv2').style.display='none';"> <img id="ImgDiv2" src="fnclientlib/styles/artwork/stamp5.gif" style="display:none"/> </div> </body </html> How can I get the images to show when I rollover them? Thanks in advance. Quote Link to comment Share on other sites More sharing options...
akitchin Posted October 30, 2009 Share Posted October 30, 2009 a few issues i see: 1. you use the onmouseuut event in the first one. that event doesn't exist. 2. you are using getElementsById(). surely you mean getElementById()? Quote Link to comment Share on other sites More sharing options...
treeleaf20 Posted October 30, 2009 Author Share Posted October 30, 2009 Thanks for the quick reply. I made those changes and it still doesn't seem to work. Any other ideas? Quote Link to comment Share on other sites More sharing options...
akitchin Posted October 30, 2009 Share Posted October 30, 2009 what does the code look like now? Quote Link to comment Share on other sites More sharing options...
treeleaf20 Posted October 30, 2009 Author Share Posted October 30, 2009 <html> <script> function resizeAll( ) { var divs = document.getElementsByTagName("div"); for ( var d = 0; d < divs.length; ++d ) { var div = divs[d]; if ( div.className == "fn-area" ) { divid = divs[d].getAttribute("id"); imgid = "Img" + divid; var Div1Width, Div1Height; Div1Width = document.getElementById(divid).offsetWidth; Div1Height = document.getElementById(divid).offsetHeight; document.getElementById(imgid).style.width = Div1Width; document.getElementById(imgid).style.height = Div1Height; } } } </script> <head> </head> <body onLoad="resizeAll()"> <div id="Div1" class="fn-area" style="width:100px;height:100px; border:1px solid black;" onmouseover="this.getElementById('ImgDiv1').style.display='block';" onmouseout="this.getElementById('ImgDiv1').style.display='none';"> <img id="ImgDiv1" src="fnclientlib/styles/artwork/creep_stamp5.gif" style="display:none"/> </div> <div id="Div2" class="fn-area" style="width:300px;height:300px; border:1px solid black;" onmouseover="this.getElementById('ImgDiv2').style.display='block';" onmouseout="this.getElementById('ImgDiv2').style.display='none';"> <img id="ImgDiv2" src="fnclientlib/styles/artwork/creep_stamp5.gif" style="display:none"/> </div> </body </html> Quote Link to comment Share on other sites More sharing options...
akitchin Posted October 30, 2009 Share Posted October 30, 2009 well, my guess is that you're using incorrect syntax to refer to the element of interest. this line: this.getElementById('ImgDiv1').style.display='block'; is probably spitting back an unknown method error. that's because technically, the div object you're referring to with "this" doesn't have that method. it's a method of the document object. if you want to use "this," you don't even need to use getElementById() because you're already referring to the div object: this.style.display='block'; if you want to stick with the getElementById(), you need to use the document object instead: document.getElementById('ImgDiv1').style.display='block'; Quote Link to comment Share on other sites More sharing options...
treeleaf20 Posted October 30, 2009 Author Share Posted October 30, 2009 That did the trick. Thank you so much. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.