<!DOCTYPE html>
<html>
?? ?<head>
?? ??? ?<meta charset="UTF-8">
?? ??? ?<title></title>
?? ??? ?<script src="js/jquery-1.12.4.js"></script>
?? ??? ?<style>
?? ??? ??? ?body{background-color: silver; }
?? ??? ??? ?#lay{width: 800px; height: 400px; padding: 0px; margin: auto; text-align: center; float: left;}
?? ??? ??? ?#text{background-color: #ccc; float: left; width: 20%; height: 100%;}
?? ??? ??? ?#text li{
?? ??? ??? ??? ?border-bottom: #666 1px solid; width: 70px; list-style: none; margin-top: 50px;
?? ??? ??? ?}
?? ??? ??? ?#text a:hover{color: red;}
?? ??? ??? ?#image{float: left; width: 80%; height: 100%;}
?? ??? ??? ?#pic{height: 100%; width: 80%;}
?? ??? ?</style>
?? ?</head>
?? ?<body>
?? ??? ?<div id="lay">
?? ??? ??? ?<div id="text">
?? ??? ??? ??? ?<ul>
?? ??? ??? ??? ??? ?<li><a onmouseover="showimage('img/1.jpg')">图片1</a></li>
?? ??? ??? ??? ??? ?<li><a onmouseover="showimage('img/2.jpg')">图片2</a></li>
?? ??? ??? ??? ??? ?<li><a onmouseover="showimage('img/3.jpg')">图片3</a></li>
?? ??? ??? ??? ??? ?<li><a onmouseover="showimage('img/4.jpg')">图片4</a></li>
?? ??? ??? ??? ??? ?<li><a onmouseover="showimage('img/5.jpg')">图片5</a></li>
?? ??? ??? ??? ?</ul>
?? ??? ??? ?</div>
?? ??? ??? ?<div id="image"><img id="pic" src="img/1.jpg"></div>
?? ??? ?</div>
?? ?</body>
?? ?<script>
?? ??? ?function showimage(path){
?? ??? ??? ?var pic=document.getElementById('pic');
?? ??? ??? ?pic.src=path;
?? ??? ?}
?? ?</script>
</html>
|