comparsa immagine passaggio mouse

**Buzzz** · 20-06-2010, 02:15

io dovrei far si che quando passo sopra ad un div, appaia una immagine posizionata in basso a destra del div stesso.. come posso fare?

grazie!

**mr.click** · 20-06-2010, 02:30

ti convienene farlo con i css non con javascript....i css hanno la proprieta :hover, che è proprio quello che serve a te...

**Buzzz** · 20-06-2010, 08:44

però l'immagine che deve apparire non deve essere grande quanto quella che c'è già.
cioè il idv che contiene l'immagine ad esempio è 100X120px, l'imagine che deve apparire sopra a quella che c'è nel div è 30X30px..
e quando quest'ultima appare al passaggio del mouse, vorrei che abbia un link separato dall'immagine sotto, in modo che cliccando sull'immagine nel div vado in una pagina, invece cliccando sull'immagine che appare vado in un'altra pagina..

questo effetto di comparire/scomparire è javascript, o sbaglio? perchè non devo sostituire l'immagine, ma devo farne apparire un'altra, sopra..

**Vicar** · 20-06-2010, 23:17

Usa l'evento onmouseover, il div preparalo in modalità nascosta (hidden) e quando ti serve lo fai comparire, non è correttsimmo ma funziona..

**Buzzz** · 21-06-2010, 21:27

ma devo metterlo come js o nel css? e come faccio a impostarlo in modalità hidden? cioè a cosa servirebbe?

**Vicar** · 21-06-2010, 21:29

Beh, sarà meglio che ti leggi un pò di css e js, cmq:

Devi metterlo nel codice html

.. onmouseover="nome_funzione()"

Dopodichè nel codice js, che devi mettlo trai tag head metti

function nome_funzione(){
//RESTO DEL CODICE
}

Modalità hidden sarebbe modalità nascosta, in modo che l'utente non lo veda, ma solo al passaggio del mouse tu lo abiliti..

**Vicar** · 21-06-2010, 21:40

Na cosa di sto tipo potrebbe andarti bene

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
.container{
	border: 1px solid #06C;
}
.second{
	display:none;
	position:absolute;
}
</style>
<script type="text/javascript">
function view(){
	var pippo = document.getElementById("secondo");
	pippo.style.display="block";
}
function hidden(){
	var pippo = document.getElementById("secondo");
	pippo.style.display="none";
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento senza titolo</title>
</head>

<body>
<div class="container" id="primo" onmouseover="view()" onmouseout="hidden()">
<div class="second" id="secondo">prova</div>
Ciao come stai?
</div>
</body>
</html>

Discussione: comparsa immagine passaggio mouse

Strumenti discussione

Ricerca discussione

Visualizza

comparsa immagine passaggio mouse

Permessi di invio