JS（改進(jìn)）：==和=區(qū)別，四張默認(rèn)圖片，鼠標(biāo)放上每張圖片后顯示別的圖片【詩(shī)書畫唱】
==和=區(qū)別，四張默認(rèn)圖片，鼠標(biāo)放上每張圖片后顯示別的圖片【詩(shī)書畫唱】
<!--案例11設(shè)置4張圖片，鼠標(biāo)移動(dòng)到那張圖片，顯示這張圖片的內(nèi)容，否則顯示圖片默認(rèn)圖片-->
方法一（代碼量更少，但不要在判斷相等中用=，要在判斷相等中用==）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
img {
width: 200px;
height: 300px;
}
</style>
<script>
window.onload = function() {
var imgShuZu = document.getElementsByTagName("img");
for(var i of imgShuZu) {
i.onmouseover = function() {
//if判斷中要用==,不然沒(méi)用，==表示相等，=表示賦值，
//img/1.jpg格式和./img/3.jpg格式都可以引入圖片
if(this.title == "11") {
this.src = "img/1.jpg";
}
if(this.title =="22") {
this.src = "img/2.jpg";
}
if(this.title == "33") {
this.src = "./img/3.jpg";
}
if(this.title == "44") {
this.src = "./img/4.png";
}
}
i.onmouseout = function() {
this.src = "./img/三連.jpg";
}
}
}
</script>
</head>
<body>
<img src="./img/三連.jpg" title="11" />
<img src="./img/三連.jpg" title="22" />
<img src="./img/三連.jpg" title="33" />
<img src="./img/三連.jpg" title="44" />
</body>
</html>
方法二（自己獨(dú)創(chuàng)鉆研思考想出的方法）：
<!--
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
img{
width: 100px;height: 100px;
}
</style>
<script>
window.onload=function(){
var imgShuZu=document.getElementsByTagName("img");
imgShuZu[0].onmouseover=function(){
document.getElementsByTagName("img")[0].src="./img/1.jpg";
}
imgShuZu[1].onmouseover=function(){
document.getElementsByTagName("img")[1].src="./img/2.jpg";
}
imgShuZu[2].onmouseover=function(){
document.getElementsByTagName("img")[2].src="./img/3.jpg";
}
imgShuZu[3].onmouseover=function(){
document.getElementsByTagName("img")[3].src="./img/4.png";
}
imgShuZu[0].onmouseout=function(){
this.src="img/三連.jpg";
}
imgShuZu[1].onmouseout=function(){
this.src="img/三連.jpg";
}
imgShuZu[2].onmouseout=function(){
this.src="img/三連.jpg";
}
imgShuZu[3].onmouseout=function(){
this.src="img/三連.jpg";
}
}
</script>
</head>
<body>
<img src="img/三連.jpg" >
<img src="img/三連.jpg">
<img src="img/三連.jpg">
<img src="img/三連.jpg">
</body>
</html>-->
