Hi all,

I'm a bit of a novice with Javascript and would like to ask for a little help replacing text wrapped in a span with an image for my navigation. So the script would:

- Look for all the LI tags in an unordered list
- Replace the SPAN tags and text within the LI with an image.

* I'm not sure if there is a clever way of creating a loop that would add an image according to the class of the LI tag, but not too important, as there are only a few links.

So my original code:

<ul class="firstLevel">
<li class="home"><a href="/index.php"><span>Home</span></a></li>
</ul>

Would ideally become this:

<ul class="firstLevel">
<li class="home"><a href="/index.php"><img src="/images/topNavHome.gif" alt="Home"/></a></li>
</ul>

I am trying to tweak a script I already have, but I keep getting stuck. Here it is:

function replaceWithImage(){
var allSpans = document.getElementsByClassName('firstLevel');
for (var i=0; i < allSpans.length; i++) {
var listid = allSpans[i].id;
forminputs = allSpans[i].getElementsByTagName('input');
for (var j=0; j < forminputs.length; j++){
if(forminputs[j].type == 'submit' && forminputs[j].id.indexOf('_replace') != -1){
var inputid = forminputs[j].id;
var sublink = document.createElement('a');
var sublinkem = document.createElement('em');
var sublinktext = document.createTextNode(forminputs[j].value);
sublink.appendChild(sublinkem);
sublink.appendChild(sublinktext);
sublink.setAttribute('href', 'javascript:document.forms.'+listid+'.submit();');
sublink.setAttribute('id', inputid);
sublink.className = 'replace '+inputid;

parentObject = forminputs[j].parentNode;
var replaced = parentObject.replaceChild(sublink,forminputs[j]);
}
}
}
};

This was initially to change a form submit button into a text link though

Any help would be greatly appreciated. Even a link to a reference would be a big help.