tooltip per ingrandire immagine, con fireofox

mjfan80

Nuovo Utente
1 Mar 2006
2
0
0
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

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:
Discussioni simili
Autore Titolo Forum Risposte Data
max1974 html in tooltip Javascript 0
L Tooltip "prigioniero" del contenitore HTML e CSS 3
A GoGo Inserire tooltip [era: vorei sapere come posso inserire ...] Javascript 8
braccobaldo Pubblicità tooltip: come funziona ed elenco siti che offrono spot contestuali Guadagnare col Sito 3
V problema con i tooltip Javascript 0
F tooltip position:relative Javascript 0
A tooltip title con effetto dissolvenza [era: Title particolare - dove trovarlo ??] Webdesign e Grafica 2
S Realizzazzione tooltip tipo sito web Javascript 2
S Modifiche tooltip Presenta il tuo Sito 0
P fare tooltip come il tag ALT Flash 2
felino Lubuntu 18.04 Requisiti per applicazione console .net core 7.0 Linux e Software 0
M pulsante per aprire una maschera che contiene controllo schede MS Access 0
E Aiuto per query PHP 8
E Il punto di riferimento italiano per Trailers cavalli Discussioni Varie 0
F CERCO Servizi SEO di Qualità per Agenzie di Servizi SEO e Posizionamento 3
D Miglior modo per estrarre le occorrenze di un elemento in un set di più file xml e quindi scrivere il risultato in una tabella Excel o magari in JSON XML 0
A Cerco programmatore/sviluppatore per creare forum Offerte e Richieste di Lavoro e/o Collaborazione 2
R Plugin di base per WordPress WordPress 0
D [COMPRO/CERCO] GUEST POST o scambio link per sito di Spiritualità ed Esoterismo. Vendere e Acquistare pubblicita' online 0
L Suggerimento Pagespeed per non vedenti HTML e CSS 0
M Analisi sito per pulire codice inutile HTML e CSS 1
Paolo69 Risolto reCAPTCHA v2 per ASP Classic ASP 0
M Hosting VPS per server di gioco Minecraft Hosting 0
N Grazie per il benvenuto Presentati al Forum 0
Lino80 [Retribuito] Cerco programmatore php per modifica/inserimento funzione/valori da un plugin importer wordpress Offerte e Richieste di Lavoro e/o Collaborazione 0
R Filtri e plugin per photoshop Photoshop 0
AkTaRuS DIsabilitare il tasto destro tranne che per code e pre Javascript 1
0 [Retribuito] Cercasi programmatore per GdR PbC Offerte e Richieste di Lavoro e/o Collaborazione 0
A Adempimenti per magazine on line Leggi, Normative e Fisco 0
R Recupero di permalink di un sito che è stato eliminato per errore WordPress 5
I aiuto urgente per thunderbird Posta Elettronica 0
A Web master per semplice sito web Offerte e Richieste di Lavoro e/o Collaborazione 2
M [Cerco][Gratuito] Artista/designer per creazione grafica gioco di società Offerte e Richieste di Lavoro e/o Collaborazione 0
M Un saluto per cominciare Presentati al Forum 1
N MAX() + ADD_DATE - per update su Mysql MySQL 0
G Qualcuno conosce questo software per gestire le telecamere IP Cam e Videosorveglianza 0
A [CERCO] Articolista per siti a tema eventi e feste private Offerte e Richieste di Lavoro e/o Collaborazione 0
F Applicazione PHP/MySQL per prenotazioni: limitare il numero massimo di posti prenotabili PHP 20
I aiuto per outlook Posta Elettronica 0
L Script per convertire numeri in parole Javascript 2
J [Cerco] [Collaborazione gratuita] Grafico per piccoli lavori di grafica Offerte e Richieste di Lavoro e/o Collaborazione 0
M Memorizzazione temi per le diverse pagine del sito Javascript 1
otto9due Proteggere file caricati dall'esterno ma renderli accessibili per gli utenti loggati. PHP 4
E Consigli per hosting reseller Hosting 0
T aiuto per trasformare un quiz fatto in JS in un quiz in JQUERY jQuery 0
F Cerco fotografo per sito abiti da sposa Discussioni Varie 2
R [cerco][retribuito] Collaborazione per creazioni loghi ed altro Offerte e Richieste di Lavoro e/o Collaborazione 0
M Unire 2 funzioni per l'invio di un form e con l'apertura di un div Javascript 0
seranto Blocco preventivo e Registro dei Consensi per Cookie tecnici? Leggi, Normative e Fisco 2
D Come estendere la tariffa per Wordpress con Visa? Hosting 1

Discussioni simili