<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
h1{
width: 100%;
color: palevioletred;
text-align: center;
}
ul{
width: 100%;
height: 140px;
float: none;
display: block;
position: absolute;
top: 200px;
left: 100px;
}
li{
list-style: none;
float: left;
}
ul>li a img{
width: 150px;
height: 100px;
margin: 20px;
border-radius: 10px;
box-shadow: 1px 1px 70px 5px white;
}
#image{
display: block;
margin-left: 20px;
width: 920px;
height: 550px;
position: absolute;
opacity: 0.9;
}
</style>
</head>
<body>
<h1>畫廊</h1>
<p id="tit">圖檔名</p>
<img id="image" src="img/3.jpg" />
<ul id="imagegallery">
<li>
<a href="img/3.jpg" target="_blank" rel="external nofollow" title="圖檔1">
<img src="img/3.jpg"/>
</a>
</li>
<li>
<a href="img/4.jpg" target="_blank" rel="external nofollow" title="圖檔2">
<img src="img/4.jpg"/>
</a>
</li>
<li>
<a href="img/5.jpg" target="_blank" rel="external nofollow" title="圖檔3">
<img src="img/5.jpg"/>
</a>
</li>
<li>
<a href="img/6.jpg" target="_blank" rel="external nofollow" title="圖檔4">
<img src="img/6.jpg"/>
</a>
</li>
</ul>
<script>
var ul = document.getElementById("imagegallery");
var links = ul.getElementsByTagName("a");
var img = document.getElementById("image");
var p =document.getElementById("tit");
for (var i = 0;i<links.length;i++) {
links[i].οnmοusemοve=function(){
img.src=this.href;
p.innerHTML=this.title;
return false;
}
}
</script>
</body>
</html>