interpim Posted August 4, 2009 Share Posted August 4, 2009 Hi all... Javascript noob here. I am wondering if anyone can help me out with some code. I am writing this page dynamically, that is the reason I am building it the way I am. Basically I want to have the 100% sized image popup when a user moves his mouse over the smaller image. here is my page so far... i can't get the popup to occur :/ http://interpim.com/pigs_test.php code below. <style type="text/css"> <!-- .a1{ position:absolute; top: 100px; left: 100px; }.a2{ position:absolute; top: 100px; left: 250px; }.a3{ position:absolute; top: 100px; left: 400px; }.a4{ position:absolute; top: 250px; left: 100px; }.a5{ position:absolute; top: 250px; left: 250px; }.a6{ position:absolute; top: 250px; left: 400px; }.a7{ position:absolute; top: 400px; left: 100px; }.a8{ position:absolute; top: 400px; left: 250px; }.a9{ position:absolute; top: 400px; left: 400px; }--></style> <div class=a1> <img src='images/wood/DSCN0235.JPG' width=15% height=15% onmouseover="src='images/wood/DSCN0235.JPG' width='100%' height='100%' " onmouseout="src='images/wood/DSCN0235.JPG' width='15%' height='15%' " > </div> <div class=a2> <img src='images/wood/DSCN0236.JPG' width=15% height=15% onmouseover="src='images/wood/DSCN0236.JPG' width='100%' height='100%' " onmouseout="src='images/wood/DSCN0236.JPG' width='15%' height='15%' " > </div> <div class=a3> <img src='images/wood/DSCN0237.JPG' width=15% height=15% onmouseover="src='images/wood/DSCN0237.JPG' width='100%' height='100%' " onmouseout="src='images/wood/DSCN0237.JPG' width='15%' height='15%' " > </div> <div class=a4> <img src='images/wood/DSCN0238.JPG' width=15% height=15% onmouseover="src='images/wood/DSCN0238.JPG' width='100%' height='100%' " onmouseout="src='images/wood/DSCN0238.JPG' width='15%' height='15%' " > </div> <div class=a5> <img src='images/wood/DSCN0239.JPG' width=15% height=15% onmouseover="src='images/wood/DSCN0239.JPG' width='100%' height='100%' " onmouseout="src='images/wood/DSCN0239.JPG' width='15%' height='15%' " > </div> <div class=a6> <img src='images/wood/DSCN0240.JPG' width=15% height=15% onmouseover="src='images/wood/DSCN0240.JPG' width='100%' height='100%' " onmouseout="src='images/wood/DSCN0240.JPG' width='15%' height='15%' " > </div> <div class=a7> <img src='images/wood/DSCN0241.JPG' width=15% height=15% onmouseover="src='images/wood/DSCN0241.JPG' width='100%' height='100%' " onmouseout="src='images/wood/DSCN0241.JPG' width='15%' height='15%' " > </div> <div class=a8> <img src='images/wood/DSCN0242.JPG' width=15% height=15% onmouseover="src='images/wood/DSCN0242.JPG' width='100%' height='100%' " onmouseout="src='images/wood/DSCN0242.JPG' width='15%' height='15%' " > </div> <div class=a9> <img src='images/wood/DSCN0243.JPG' width=15% height=15% onmouseover="src='images/wood/DSCN0243.JPG' width='100%' height='100%' " onmouseout="src='images/wood/DSCN0243.JPG' width='15%' height='15%' " > </div> Link to comment https://forums.phpfreaks.com/topic/168856-onmouseoveronmouseout-problems/ Share on other sites More sharing options...
Psycho Posted August 4, 2009 Share Posted August 4, 2009 <img src="image.jpg" style="width:15%;height:15%" onmouseover="this.style.width='100%';this.style.height='100%'" onmouseout="this.style.width='15%';this.style.height='15%'" > Link to comment https://forums.phpfreaks.com/topic/168856-onmouseoveronmouseout-problems/#findComment-890936 Share on other sites More sharing options...
interpim Posted August 4, 2009 Author Share Posted August 4, 2009 Thanks for the help... that worked, but now I am getting a problem with the image not showing up on-top of the smaller images. I have tried changing the zIndex, but it isn't working <div class=a4> <img id='big4' src='images/wood/DSCN0238.JPG' width='137px' height='103px' onmouseover="this.style.width='912px';this.style.height='684px'; this.style.zIndex='50'" onmouseout="this.style.width='137px';this.style.height='103px'; this.style.zIndex='-1'" > </div> Link to comment https://forums.phpfreaks.com/topic/168856-onmouseoveronmouseout-problems/#findComment-890957 Share on other sites More sharing options...
andyodey Posted August 6, 2009 Share Posted August 6, 2009 zIndex requires an integer not a string. so try: this.style.zIndex=50; Link to comment https://forums.phpfreaks.com/topic/168856-onmouseoveronmouseout-problems/#findComment-892046 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.