How to display an li tag's title using javascript

Question

Hello, I recently found a javascript image gallery, and noticed that it changes the title attribute in the <li> tag. I was wondering how I could make the title information display as text, and update dynamically. As always, any help is appreciated. The code is below.

Thanks,

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

OK, within the the gal.addEvent(li[i], 'click', function (){ function do the following:

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

Than you just need an element for that caption:

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

Is this what you want to have?

Answer 2

I finally figured it out. I used the caption div that Kau-Boy suggested, then changed the javascript to the following:

    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();
});