onmouseover/onmouseout problems

[interpim]

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>

 

[Psycho]

<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%'" >

[interpim]

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>

 

[andyodey]

zIndex requires an integer not a string.

so try: this.style.zIndex=50;