[JS] visualizzare un'immagine quando si passa col mouse sopra un'altra

**badaze** · 20-10-2005, 18:01

Originariamente inviato da iacchi
ragazzi, mi sembrava ovvio che questa pagina era solo per testare lo sfarfallio, e non fosse una pagina reale del sito!!! Ad ogni modo questo scriptino mi serve per le risoluzioni monitor da 1024x768 in giù, perciò se usate una risoluzione molto alta provate a ridure la finestra del browser. Ah, piccolo particolare: vista la natura del sito in questione, mi interessa solamente la visualizzazione e il comportamento della pagina con browser gecko-based (firefox, mozilla & co.).

Per l'ultimo suggerimento: il codice di onmouseover e onmouseout nel div zoom non ci doveva essere: l'avevo messo per una prova e me lo sono scordato lì. Ora l'ho cancellato.

Beh con FF dal momento in cui ho tolto il codice di onmouseover e onmouseout non ho più visto so sfarfallio.

**iacchi** · 20-10-2005, 18:10

potresti provare con la pagina che è caricata ora? L'ho corretta. Ovviamente le due immagini devono sovrapporsi, e il mouse deve essere sopra la sovrapposizione

**iacchi** · 23-10-2005, 19:19

uppino

**badaze** · 23-10-2005, 20:51

Prova questo

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
</head>
<body>
<script language="JavaScript" type="text/javascript">
<!--
function zoomIn(anImage) {
 document.getElementById('zoom').innerHTML  ='[img]+anImage.src+[/img]';
 document.getElementById('zoom').style.top  = anImage.offsetTop;
 document.getElementById('zoom').style.left = anImage.offsetLeft;  
}

function zoomOut(e) {
 document.getElementById('zoom').innerHTML  = '';
 document.getElementById('zoom').style.top  = -1000;
 document.getElementById('zoom').style.left = -1000; 
}

//-->
</script>

</body>
</html>

<html>
<head>
<link REL="stylesheet" type="text/css" media="all" href="prova2.css">
</head>
<body>

<div id="base" onmouseleave="zoomOut()">
  
	
	<div id="zoom" style="position:absolute;left:-1000;top:-1000"></div>
</div>



</body>
</html>

**iacchi** · 23-10-2005, 23:09

allora: onmouseenter e onmouseleave non mi pare siano due funzioni js valide, e infatti non faceva niente. Ho cambiato con onmouseover e onmouseout ma il risultato non cambia, lo sfarfallio resta: http://iacchi.altervista.org/js/prova2.html

Ma quel controllo con l'if dite che non è fattibile?

**badaze** · 24-10-2005, 10:19

Cosi dovrebbe andare

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link REL="stylesheet" type="text/css" media="all" href="prova2.css">
<style type="text/css">
<!--
.piccola {height:100;width:200}
-->
</style>

<script language="JavaScript" type="text/javascript">
<!--
zoomed = false;
function zoomIn(anImage) {
if (!zoomed) {
 zoomOut();
 return;
}
document.getElementById('zoom').innerHTML  = '[img]+anImage.src+[/img]'; 
document.getElementById('zoom').style.top  = anImage.offsetTop; 
document.getElementById('zoom').style.left = anImage.offsetLeft;
} 

function zoomOut() {
document.getElementById('zoom').innerHTML  = ''; 
document.getElementById('zoom').style.top  = -1000; 
document.getElementById('zoom').style.left = -1000; 
} 
//-->
</script>
</head>
<body>
<div id="base">
  [img]abstract.png[/img]
	


	[img]abstract.png[/img]
	
	<div id="zoom" style="position:absolute;left:-1000;top:-1000"  onmouseout="zoomed=false;zoomIn();"></div>
</div>
</body>
</html>

**iacchi** · 24-10-2005, 10:34

sembrerebbe proprio funzionare! Ti ringrazio tantissimo. Presto vedrete anche il risultato pratico

**iacchi** · 25-10-2005, 12:10

So che mi ucciderai/ucciderete, però: l'ultimo codice di badaze è perfetto per il mio scopo (ho riadattato un minimo il css del div zoom); è perfetto però per le pagine in cui ho solo un'immagine da zoomare. Nel caso però le immagini siano due o più come posso fare?

Ringrazio chi avrà la pazienza di continuare ad aiutarmi

**iacchi** · 25-10-2005, 12:15

purtroppo non posso cancellare il post, ma vi prego di non considerare la mia ultima affermazione. Mi sono accorto di aver fatto un errore di altro tipo.

Discussione: [JS] visualizzare un'immagine quando si passa col mouse sopra un'altra

Strumenti discussione

Ricerca discussione

Visualizza

Permessi di invio