早教吧 育儿知识 作业答案 考试题库 百科 知识分享

如何用JS输出图片img的title<divclass="box"id="box"><ahref="#"class="pic1"><imgsrc="1.j

题目详情
如何用JS输出图片img的title
<div class="box" id="box">    <a href="#" class="pic1"><img src="1.jpg" title="这是图片title的值"></a>    <a href="#" class="pic2"><img src="2.jpg" title="这是图片title的值2"></a>    <a href="#" class="pic3"><img src="3.jpg" title="这是图片title的值3"></a>    <a href="#" class="pic4"><img src="4.jpg" title="这是图片title的值4"></a></div><div class="box2" id="box2"></div> 如何通过JS实现鼠标经过图片1.jpg  2.jpg  3.jpg  4.jpg的时候动态的提取这些图片的title指到box2中
▼优质解答
答案和解析
<HEAD>
<TITLE>如何通过JS实现鼠标经过图片1.gif  2.gif  3.gif  4.gif的时候动态的提取这些图片的title指到box2中 </TITLE>
<style type="text/css">
.on{padding15px 10px; font-weightbold;colorred;}
.off{padding0px 0px; font-weightthin;colorblack;}
</style>
<script type="text/javascript" src="jquery-1.8.0.js"></script>
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script>
jQuery(function($) { 
   $('#box img').each(function(){
    $(this).bind('mouseenter mouseleave',function(){
    var t = '|'+this.title+'|';
    if($("#box2").text().indexOf(t)==-1)
    {
     $("#box2").text($("#box2").text()+t);
    }
    });
    });
});
</script>
</HEAD>
<BODY>

<div class="box" id="box">
<a href="#" class="pic1">
<img src="mouse_drag\images\b.gif" title="1" />
</a>    
<a href="#" class="pic2">
<img src="mouse_drag\images\b.gif" title="2" />
</a>    
<a href="#" class="pic3">
<img src="mouse_drag\images\p.gif" title="3" />
</a>    
<a href="#" class="pic4">
<img src="mouse_drag\images\g.gif" title="4" />
</a>
</div>
<div class="box2" id="box2"></div> 
</BODY>