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 width 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
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?
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 width 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
Codice:
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?
Ultima modifica: