关于点击a链接就会显示指定图片

<ul id="image">
        <li><a href="Text_img/1.jpg" title="1">1</a></li>
        <li><a href="Text_img/2.jpg" title="2">2</a></li>
        <li><a href="Text_img/3.jpg" title="3">3</a></li>
        <li><a href="Text_img/4.jpg" title="4">4</a></li>
    </ul>
    <img src="Text_img/5.jpg" alt="" id="place">
    <p id="text">choose picture</p>
    <script>
        function pre(){
            var imge=document.getElementById("image");
            var link=imge.getElementsByTagName("a");
            for(var i=0;i<link.length;i++){
                link[i].onclick=function(){
                    showPic(this);
                    console.log(i);     //4
                    console.log(this);  //选中指定图片
                    return false;
                }
            }
        }
        window.onload=pre;
    </script>

    <script>
        function showPic(Img){
            var souce=Img.getAttribute("href");
            var place=document.getElementById("place");
            place.setAttribute("src",souce);
            // var li=object.getAttribute("class");
            // console.log(li);     //显示不出来？？
            var title=Img.getAttribute("title");
            var text=document.getElementById("text");
            text.childNodes[0].nodeValue=title;
        }

return false  当showPic()正常返回，pre()函数取消onclick事件的默认行为（不添加，点击a会直接跳转新页面）

其中一些问题：this指向

　　　　　　    li[i]中i一直为4，为什么this还能指到指定的图片