- Home
- Categorie
- Coding e Sistemistica
- Javascript & Framework
- tooltip per ingrandire immagine, con fireofox va, con ie no
-
tooltip per ingrandire immagine, con fireofox va, con ie no
Salve a tutti
premetto: sono appena entrato nel mondo javascriptho 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*.getAttribute("title")){ //se l'immagine ha l'attributo title img_src= immagini*.getAttribute("src"); immagini*.onmouseover = showTooltip; //immagini*.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*.parentNode.replaceChild(contenitore_tooltip,immagini*); //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"; }
o 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?
-
Ciao
Explorer segnala un errore generico.
Ho provato a salvare la pagina e a testarla con quel solo script e la prima immagine e così funziona anche con Explorer.
Sarà qualche conflitto con altri script.
-
in effetti avevo alcuni script allegati che non mi servivano proprio
i ho tolti
ma non va comunque (tra l'altro a em IE pare non dare errori)
ma che incompatibilità può dare? e perchè non va solo con IE?PS: ora non ci sono altri script nella pagina
-
Guarda so solo dirti che lasciando il div necessario e l'immagine e togliendo i css, funziona (seppur con un effetto sgradevole).
Prova partendo dal caso funzionante che ti ho ho detto ad aggiungere i vari pezzi e vedere cos'è che crea problema.
P.S. IE è originale in tutto
-
non ho capito molto cio che mi hai scritto
scusami
ho provato a togliere dal css la classe che coinvolgo (e ne ho eliminata una che non c'era nemmeno nel css)ma con IE non funziona comunque
e lasciare il div necessario, intendevi lasciare il resto delo script invariato?
PS: leggo solo ora che i link attivi non sono obbligatori, scusatemi
PPS: vorrei modificare il codice di inizio post ma non posso più
-
@mjfan80 said:
non ho capito molto cio che mi hai scritto
Il senso era, togli tutto tutto tutto.
Lascia solo 1 foto, lo script e testa se funziona (a me funzionava).
Poi aggiungi man mano gli altri componenti della pagina (Script, css, div ecc)
fin quando non si presenta il problema.
@mjfan80 said:
PS: leggo solo ora che i link attivi non sono obbligatori, scusatemi
Sono obbligatori non attivi.
@mjfan80 said:
PPS: vorrei modificare il codice di inizio post ma non posso più
Che modifiche vuoi fare? Sta bene così per quanto riguarda il regolamento.
Eventualmente dimmelo in privato.