獲取圖片的路徑，即src的值，並依據不同的樣式在alt屬性中顯示

 

劉大偉

2011.05.09

瀏覽網頁中圖片的時候，根據網頁的易用性要求，當鼠標放到圖片上的時候需要顯示該圖片的相關信息，大多數情況下顯示的都是該圖片的名稱，爲了自動獲取每一張圖片的名稱可以在js腳本中通過獲取該圖片的src的值實現。不過由於默認情況下，alt顯示出來的效果，如字體、顏色、背景等等，並不盡人意，因此樣式需要自己設計，這些也可以在腳本中實現。根據網上已有的一些方法，整理出以下的代碼可以簡單的實現這種功能：

<SCRIPT LANGUAGE="JavaScript">
function getAbsolutePosition(obj)
{
    position = new Object();
    position.x = 0;
    position.y = 0;
    var tempobj = obj;
    while(tempobj!=null && tempobj!=document.body)
    {
        if(window.navigator.userAgent.indexOf("MSIE")!=-1)
        {
            position.x += tempobj.offsetLeft;
            position.y += tempobj.offsetTop;
        }
        else if(window.navigator.userAgent.indexOf("Firefox")!=-1)
        {
            position.x += tempobj.offsetLeft;
            position.y += tempobj.offsetTop;
        }
        tempobj = tempobj.offsetParent
    }
    return position;
}
function showalt(e,s)
{
    var object = document.getElementById(s);//s爲img的ID
    var m = object.getAttribute('src', 2);//如果第二個參數爲2，則顯示的內容爲絕對路徑，和下面被註釋行的結果一樣
    //var m=document.getElementById(s).src;
    e = e || window.event
    var obj = e.target||e.srcElement
    var pos = getAbsolutePosition(obj)
    var div = document.getElementById("imgalt")
    div.style.display=""
    div.style.top = pos.y+e.offsetY+10+"px"
    div.style.left = pos.x+e.offsetX+10+"px"
    div.innerHTML = m;
    window.status = e.clientY
}
function hide()
{
    document.getElementById("imgalt").style.display="none"
}
</SCRIPT>
<img id="id1" src="pic1.jpg" width=50 onmousemove="showalt(event,'id1')" onmouseout="hide()">
<img id="id2" src="pic2.jpg" width=150 onmousemove="showalt(event,'id2')"onmouseout="hide()">
<div id=imgalt style="position:absolute;border:1px solid black;background-color:yellow;display:none"></div>