如何利用顯示在LI標籤的標題的JavaScript

Question

我最近發現一個javascript圖片庫，並注意到它的變化在<li>標籤的title屬性。我想知道如何將標題信息顯示爲文本並動態更新。一如往常，任何幫助表示讚賞。代碼如下。

感謝，

Mraisky

JS：

<!--[if lt IE 8]> 
<style media="screen,projection" type="text/css"> 
    #jgal li { filter: alpha(opacity=50); } 
    #jgal li.active, #jgal li:hover { filter: alpha(opacity=100); } 
</style> 
<![endif]--> 
<!--[if lt IE 6]><style media="screen,projection" type="text/css">#gallery { display: block; }</style><![endif]--> 
<script type="text/javascript">document.write("<style type='text/css'> #gallery { display: none; } </style>");</script> 
<script type="text/javascript"> 
var gal = { 
    init: function() { 
     if (!document.getElementById || !document.createElement || !document.appendChild) return false; 
     if (document.getElementById('gallery')) document.getElementById('gallery').id = 'jgal'; 
     var li = document.getElementById('jgal').getElementsByTagName('li'); 
     li[0].className = 'active'; 
     for (i = 0; i < li.length; i++) { 
      li[i].style.backgroundImage = 'url(' + li[i].getElementsByTagName('img')[0].src + ')'; 
      li[i].title = li[i].getElementsByTagName('img')[0].alt; 
      gal.addEvent(li[i], 'click', function() { 
       var im = document.getElementById('jgal').getElementsByTagName('li'); 
       for (j = 0; j < im.length; j++) { 
        im[j].className = ''; 
       } 
       this.className = 'active'; 
      }); 
     } 
    }, 
    addEvent: function (obj, type, fn) { 
     if (obj.addEventListener) { 
      obj.addEventListener(type, fn, false); 
     } 
     else if (obj.attachEvent) { 
      obj["e" + type + fn] = fn; 
      obj[type + fn] = function() { 
       obj["e" + type + fn](window.event); 
      } 
      obj.attachEvent("on" + type, obj[type + fn]); 
     } 
    } 
} 
gal.addEvent(window, 'load', function() { 
    gal.init(); 
}); 
</script> 

HTML：

<ul id="gallery"> 
<li><img src="images/paintings/image1.jpg" alt="Pennsylvania Ave./Linda --- 2006 --- oil and wallpaper on canvas"></li> 
<li><img src="images/paintings/image2.jpg" alt="Mt. Vernon Ave. I --- 2007 --- oil and wallpaper on canvas"></li> 
<li><img src="images/paintings/image3.jpg" alt="Northland, I --- 2006 --- oil and wallpaper on canvas"></li> 
<li><img src="images/paintings/image4.jpg" alt="S.H.S./ Page. Arizonia --- 2007 --- oil on canvas"></li> 
<li><img src="images/paintings/image5.jpg" alt="California/ Gum Tree --- 2005 --- oil and wallpaper on canvas"></li> 
<li><img src="images/paintings/image6.jpg" alt="Oak Park Park, from Mexico love, Jennifer --- 2006"></li> 
<li><img src="images/paintings/image7.jpg" alt="New Orleans Mall to Bryce Canyon --- 2006 --- oil on canvas"></li> 
<li><img src="images/paintings/image8.jpg" alt="Hilton to Pierce Ave --- 2005 --- oil on canvas"></li> 
<li><img src="images/paintings/image9.jpg" alt="Penn. Ave. Hear No Evil, Speak No Evil, See No Evil --- 2006 --- oil and wallpaper on canvas"></li> 
<li><img src="images/paintings/image10.jpg" alt="Oak Park Park/Marlas House --- 2007 --- oil and wallpaper on canvas"></li> 
</ul> 

Answer 1

確定，在gal.addEvent(li[i], 'click', function(){函數中執行以下操作：

document.getElementById('caption').innerHTML = this.alt; 

比你只需要爲標題的元素：

<div id="caption"></div> 

這是你想擁有什麼？

Answer 2

我終於明白了。我使用了Kau-Boy建議的標題div，然後將javascript更改爲以下內容：

var gal = { 
    init: function() { 
     if (!document.getElementById || !document.createElement || !document.appendChild) return false; 
     if (document.getElementById('gallery')) document.getElementById('gallery').id = 'jgal'; 
     var li = document.getElementById('jgal').getElementsByTagName('li'); 
     li[0].className = 'active'; 
     var captions = li[0].getElementsByTagName('img')[0].alt; 
     document.getElementById('caption').innerHTML = captions; 
     for (i = 0; i < li.length; i++) { 
      li[i].style.backgroundImage = 'url(' + li[i].getElementsByTagName('img')[0].src + ')'; 
      li[i].title = li[i].getElementsByTagName('img')[0].alt; 
      gal.addEvent(li[i], 'click', function() { 
       var im = document.getElementById('jgal').getElementsByTagName('li'); 
       for (j = 0; j < im.length; j++) { 
        im[j].className = ''; 
       } 
       this.className = 'active'; 
       var captions = this.getElementsByTagName('img')[0].alt; 
       document.getElementById('caption').innerHTML = captions; 
      }); 
     } 
    }, 
    addEvent: function (obj, type, fn) { 
     if (obj.addEventListener) { 
      obj.addEventListener(type, fn, false); 
     } 
     else if (obj.attachEvent) { 
      obj["e" + type + fn] = fn; 
      obj[type + fn] = function() { 
       obj["e" + type + fn](window.event); 
      } 
      obj.attachEvent("on" + type, obj[type + fn]); 
     } 
    } 
} 
gal.addEvent(window, 'load', function() { 
    gal.init(); 
});