<style>
img {margin:5px;}
</style>
<script>
function imgchange(imgname) {
var con = document.getElementById("content");
con.innerHTML = "<img src='" + imgname + "' height='300'/>";
}
</script>
</head>
<body>
<div id="content"><img src="./imgs/scene1.jpg" height="300"/></div>
<img src="./imgs/red.png" onmouseover="imgchange('./imgs/scene1.jpg');"/>
<img src="./imgs/blue.png" onmouseover="imgchange('./imgs/scene2.jpg');"/>
<img src="./imgs/green.png" onmouseover="imgchange('./imgs/scene3.jpg');"/>
</body>
</html>
img {margin:5px;}
</style>
<script>
function imgchange(imgname) {
var con = document.getElementById("content");
con.innerHTML = "<img src='" + imgname + "' height='300'/>";
}
</script>
</head>
<body>
<div id="content"><img src="./imgs/scene1.jpg" height="300"/></div>
<img src="./imgs/red.png" onmouseover="imgchange('./imgs/scene1.jpg');"/>
<img src="./imgs/blue.png" onmouseover="imgchange('./imgs/scene2.jpg');"/>
<img src="./imgs/green.png" onmouseover="imgchange('./imgs/scene3.jpg');"/>
</body>
</html>
