JS（改进）：==和=区别，四张默认图片，鼠标放上每张图片后显示别的图片【诗书画唱】
==和=区别，四张默认图片，鼠标放上每张图片后显示别的图片【诗书画唱】
<!--案例11设置4张图片，鼠标移动到那张图片，显示这张图片的内容，否则显示图片默认图片-->
方法一（代码量更少，但不要在判断相等中用=，要在判断相等中用==）：
<!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判断中要用==,不然没用，==表示相等，=表示赋值，
//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>
方法二（自己独创钻研思考想出的方法）：
<!--
<!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>-->
