ya funciona :) gracias por la ayuda asi quedo:
Código:
<div class="photo"><img id="imgprincipal" src="<? echo $row[5]; ?>" alt="<? echo $row[2]; ?>" onerror="this.src='images/item-pic300.jpg'" width="300" height="301" />
<br>
<script language="javascript">
function showimg(showimgurl){
document.getElementById('imgprincipal').src=showimgurl;
}
function restoreimg(){
document.getElementById('imgprincipal').src='<? echo $row[5]; ?>';
}
</script>
<p align="center">
<img style="cursor: pointer; cursor: hand;" onmouseover="javascript:showimg('<? echo $row[5]; ?>')" onmouseout="javascript:restoreimg()" src="<? echo $row[5]; ?>" onerror="this.src='images/item-pic50.jpg'" width="50" height="50" />
<img style="cursor: pointer; cursor: hand;" onmouseover="javascript:showimg('<? echo $row[6]; ?>')" onmouseout="javascript:restoreimg()" src="<? echo $row[6]; ?>" onerror="this.src='images/item-pic50.jpg'" width="50" height="50" />
<img style="cursor: pointer; cursor: hand;" onmouseover="javascript:showimg('<? echo $row[7]; ?>')" onmouseout="javascript:restoreimg()" src="<? echo $row[7]; ?>" onerror="this.src='images/item-pic50.jpg'" width="50" height="50" />
<img style="cursor: pointer; cursor: hand;" onmouseover="javascript:showimg('<? echo $row[8]; ?>')" onmouseout="javascript:restoreimg()" src="<? echo $row[8]; ?>" onerror="this.src='images/item-pic50.jpg'" width="50" height="50" />
<img style="cursor: pointer; cursor: hand;" onmouseover="javascript:showimg('<? echo $row[9]; ?>')" onmouseout="javascript:restoreimg()" src="<? echo $row[9]; ?>" onerror="this.src='images/item-pic50.jpg'" width="50" height="50" />
</p>