tooltip per ingrandire immagine, con fireofox va, con ie no

[mjfan80]

Salve a tutti
premetto: sono appena entrato nel mondo javascript

ho voluto crearmi uno script per il mio sito, in modo che, in tutte le immagini che avessero la proprietà title specificata (che io metterò solo a quelle immagini che ridimensioni nel documento html con widht e height), al passaggio dle mouse potesse crearsi un tooltip che facesse vedere le immagini con le dimensioni originali

in questo modo, nel io documento html, vorrei non inserire nessuno javascript a mano, ma semplicemente, per le immagini per cui voglio creare questo tooltip, le inserisco normalmente con il tag html <img> a cui do le proprietà width e height in modo da ridimensionare via html le immagini

questo è lo script

window.onload=enableTooltips;

function enableTooltips(){
	var div_contenuto=document.getElementById("contenuto");
	var immagini=div_contenuto.getElementsByTagName("img");
	if (immagini.lenght != 0){ //se ci sono immagini nel div contenitore
				
		for(i=0;i<immagini.length;i++){
			if(immagini[i].getAttribute("title")){ //se l'immagine ha l'attributo title
				img_src= immagini[i].getAttribute("src");
				immagini[i].onmouseover = showTooltip;
				//immagini[i].onmouseout = hideTooltip;
				
				//creo un div dove metterò dentro sia l'immagine sia il div tooltip
				var contenitore_tooltip = document.createElement("div");
				contenitore_tooltip.id = "div_contenitore_tooltip" + img_src;
				contenitore_tooltip.className = "div_contenitore_tooltip";
				contenitore_tooltip.style.position="relative";
				
				//creo il tooltip, vuoto per ora
				var tooltip = document.createElement("div");
				tooltip.id = "div_img_tooltip" + img_src;
				tooltip.className = "div_img_tooltip";
				//appendo il tooltip dentro il contenitore
				contenitore_tooltip.appendChild(tooltip);
				
				// sostituisco questo div contentore al posto di immagine
				immagine_vecchia = immagini[i].parentNode.replaceChild(contenitore_tooltip,immagini[i]);
				
				//appendo l'immagine dentro il div contenitore
				contenitore_tooltip.appendChild(immagine_vecchia);
				
			}
		}
	}
}

function showTooltip(event){
	img_src = this.getAttribute("src");
	align = this.getAttribute("align");
    
	this.parentNode.getElementsByTagName("div")[0].style.visibility="visible";
	this.parentNode.getElementsByTagName("div")[0].style.zIndex="1000";
	this.parentNode.getElementsByTagName("div")[0].onmouseout = hideTooltip;
	
	if (align ==  "left" ){
		this.parentNode.getElementsByTagName("div")[0].innerHTML="<img src=\"" + img_src + "\" align=\"left\"/>";	
	}
	else if (align ==  "right" ){
		this.parentNode.getElementsByTagName("div")[0].innerHTML="<img src=\"" + img_src + "\" align=\"right\"/>";
	}
	else {
		this.parentNode.getElementsByTagName("div")[0].innerHTML="<img src=\"" + img_src + "\" align=\"left\"/>";	
	}
}

function hideTooltip(event){
	this.parentNode.getElementsByTagName("div")[0].style.visibility="hidden";
}

lo script funziona, apparentemente, senza problemi con firefox, ma con ie no
provatelo qui http://www.mjj.it/upload/ajax/michael.php (PS solo le prime due immagini nel contenuto hanno l'attributo title)

come mai questa differenza?

[mjfan80]

nessuno mi sa aiutare?
è forse un problema di css?