1.先得到要操作的网页元素的DOM对象
img的DOM对象，textarea的DOM对象
2.遍历图片的DOM对象集合，绑定事件，
绑定鼠标移上的事件，鼠标移开的事件
3.事件触发时，回调函数的执行
鼠标移上时，判断当前移上的图片是第几张图片，
获取当前图片的title属性
根据是第几张图，来决定如何切换图片
① > 2 star2.png
② < 2 star1.png
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>评分</title> <link rel="stylesheet" href="css/style.css" /> </head> <body> <div id="wrap"> <div id="mark"> <h1>宝贝与描述相符(打分匿名)</h1> <div id="pic"> <img src="images/star0.png" title="1" name="0"/> <img src="images/star0.png" title="2" name="1"/> <img src="images/star0.png" title="3" name="2"/> <img src="images/star0.png" title="4" name="3"/> <img src="images/star0.png" title="5" name="4"/> <br/> </div> <form> <textarea cols="40" rows="8" value="" id='txt'></textarea> <br/> <button class="btn">公开评论</button> </form> </div> </div> <script> var pic=document.getElementById("pic"); var txt=document.getElementById("txt"); var divList=pic.children; var flag=0; var arr=["差","一般","中等","还行","还好"]; for(var i=0;i<divList.length;i++) { divList[i].onmouseover=function() { this.setAttribute("src", "./images/star2.png"); txt.innerHTML=arr[this.title-1];//获取当前对象的元素属性 } divList[i].onclick=function() { flag=1; if(this.title >= 3){ for(var k=0;k<this.title;k++){ divList[k].setAttribute("src", "./images/star2.png"); txt.innerHTML=arr[k]; } } else { for(var k=0;k<this.title;k++){ divList[k].setAttribute("src", "./images/star1.png"); txt.innerHTML=arr[k]; } } } divList[i].onmouseout=function() { if(flag==0) { this.setAttribute("src", "./images/star0.png"); txt.innerHTML= "";//id属性为txt的页面内容为空 } else { if(this.title >= 3){ for(var k=0;k<this.title;k++){ divList[k].setAttribute("src", "./images/star2.png"); txt.innerHTML=arr[k]; } } else { for(var k=0;k<this.title;k++){ divList[k].setAttribute("src", "./images/star1.png"); txt.innerHTML=arr[k]; } } } } } </script> <!-- 1.先得到要操作的网页元素的DOM对象img的DOM对象，textarea的DOM对象 2.遍历图片的DOM对象集合，绑定事件，绑定鼠标移上的事件，鼠标移开的事件 3.事件触发时，回调函数的执行，鼠标移上时，判断当前移上的图片是第几个图片，获取当前图片的title属性 根据是第几张图，来决定如何切换图片 --> <script type="text/javascript"></script> </body> <script> </script> </html>
