<html>
<head>
<title>Картинная галерея</title>
<script>
image1=new Image()
image2=new Image()
image3=new Image()
image4=new Image()
image1.src='images_for_galery/1.jpg'
image2.src='images_for_galery/2.jpg'
image3.src='images_for_galery/3.jpg'
image4.src='images_for_galery/4.jpg'
function stimage() {
document.images["mainimage"].src=image1.src
document.images["mainimage"].border=4
document.images["mainimage"].style.borderColor='#997246'
}
function changeimage(needimage) {
document.images["mainimage"].src=needimage.src
document.images["smallimage"].src='images/пустота.png'
document.images["smallimage"].style.borderWidth=0
}
function showsmallimage(needimage,x) {
if (document.images["mainimage"].src!=needimage.src) {
document.images["smallimage"].style.left=x
document.images["smallimage"].src=needimage.src
document.images["smallimage"].style.borderWidth=2+'px'
}
}
function hidesmallimage() {
document.images["smallimage"].src='images/пустота.png'
document.images["smallimage"].style.borderWidth=0+'px'
}
</script>
</head>
<body onload="stimage()">
<img name="smallimage" height="120" style="position: absolute; top: 435px; left: 453px; opacity: 0.6; border: 0px solid #997246;">
<center><img name="mainimage" height="399"><br><br>
<table><tr><td height="50" colspan="4"> </td></tr><tr></tr><td height="80" colspan="5"> </td><tr>
<td><input type="button" value="1" onClick="changeimage(image1)" onMouseOver="showsmallimage(image1,455)" onMouseOut="hidesmallimage()"></td>
<td><input type="button" value="2" onClick="changeimage(image2)" onMouseOver="showsmallimage(image2,485)" onMouseOut="hidesmallimage()"></td>
<td><input type="button" value="3" onClick="changeimage(image3)" onMouseOver="showsmallimage(image3,515)" onMouseOut="hidesmallimage()"></td>
<td><input type="button" value="4" onClick="changeimage(image4)" onMouseOver="showsmallimage(image4,545)" onMouseOut="hidesmallimage()"></td>
</tr></table>
</center>
</body>
</html>
