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. Link to comment https://forums.phpfreaks.com/topic/179634-solved-div-rollover-not-working/ 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()? Link to comment https://forums.phpfreaks.com/topic/179634-solved-div-rollover-not-working/#findComment-947855 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? Link to comment https://forums.phpfreaks.com/topic/179634-solved-div-rollover-not-working/#findComment-947859 Share on other sites More sharing options...
akitchin Posted October 30, 2009 Share Posted October 30, 2009 what does the code look like now? Link to comment https://forums.phpfreaks.com/topic/179634-solved-div-rollover-not-working/#findComment-947861 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> Link to comment https://forums.phpfreaks.com/topic/179634-solved-div-rollover-not-working/#findComment-947865 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'; Link to comment https://forums.phpfreaks.com/topic/179634-solved-div-rollover-not-working/#findComment-947875 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. Link to comment https://forums.phpfreaks.com/topic/179634-solved-div-rollover-not-working/#findComment-947881 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.