1.图片添加先在项目文件夹中新建一个文件夹,需要在代码中使用的图片都保存在此文件夹中,img src'图片路径' alt=""
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible"content="ie = edge">
</title></title>
<style>
img {
width: 400 px;
}
</style>
</head>>
<body>
<br><button id="zeroOne">strelitzia01</button><br><br>
<button id="zeroTwo">strelitzia02</button><br>
<img src='images/zeroTwo.png' alt="" title="strelitzia02">
<script>
//修改元素属性 src
//1.获取元素
var zeroOne = document.getElementById('zeroOne');
var zeroTwo = document.getElementById('zeroTwo');
var img = document.querySelector('img');
//2.注册事件
zeroOne.onclick = function(){
img.src = 'images/zeroOne.png';
img.title = 'strelitzia01';
}
zeroTwo.onclick = function(){
img.src = 'images/zeroTwo.png';
img.title = 'strelitzia02';
}
</script>
</body>>
</html>>