testo appare onmouseover [era: cerco script]

**aledallas** · 07-04-2011, 14:47

Ciao a tutti!
ho tre pulsanti (div) in mezzo alla pagine, cerco uno script che mi faccia apparire un testo o un div sotto ognuno quando ci si passa sopra con il mouse.

mi potreste aiutare?

**cavicchiandrea** · 07-04-2011, 14:59

Ciao e benvenuto, cerca qui

**aledallas** · 07-04-2011, 15:54

ho cercato tra gli script presenti, ma non riesco a trovare quello adatto, eppure penso che lo script che mi serve sia semplice

**walterdolce** · 07-04-2011, 16:08

Non ho visitato il link che ti hanno consigliato ma potrei consigliarti di usare jQuery.

Per esempio al passaggio (io credo meglio al click) del mouse potresti far apparire, appunto, il testo sotto il "div" di riferimento.

Prova con:

codice:

<html>
<head></head>
<body>

<div id="testo1">Testo compari!</div>
 

  <div id="testoGiu" style="display:none;">Eccomi, sono il tuo testo!</div>

  <script type="text\javascript">
    $(function () {   

      $("#testo1").click(function() {

         $("#testoGiu").css("display","block");

      });

});
  </script>
</body>
</html>

Prova così. Potrebbe essere una soluzione. Ad ogni modo, se il codice che ti ho postato non funziona rivedi la funzione "click()" nel sito ufficiale di jquery.

Un'altra soluzione potrebbe essere, sempre con jQuery, la "addClass". Oppure aggiungere direttamente un elemento.

**walterdolce** · 07-04-2011, 16:10

Mi sono dimenticato di dirti una cosa!!!

Prima di provare lo script scarica le librerie jquery!!! Poi le inserisci nei tag <head> e prova..

Scusa la dimenticanza

**aledallas** · 07-04-2011, 17:42

grazie, ho provato, ma non funziona.
e come faccio a far fare la stessa funziona a più div? (es ognuno con click o mouseover apre un div diverso)?

**walterdolce** · 07-04-2011, 18:28

Si non funziona perchè il codice non è corretto. Perdonami.

Per farlo a "div" diversi non ci vuole nulla. Questo il codice corretto.

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
	<title></title>
<style type="text/css">

#txt1 { display:none;height:30px;border:1px red solid; }

#txt2 { display:none;height:30px;border:1px red solid; }

#txt3 { display:none;height:30px;border:1px red solid; }

</style>

<script type="text\javascript" src=" --- QUI LA LIBRERIA JQUERY --- "></script>
<script type="text\javascript" src=" --- ALTRA LIBRERIA JQUERI UI ---"></script>

<script type="text/javascript">
$(document).ready(function() {

   $("#testo1").click(function() {

      $("#txt1").css("display","block");

   });

   $("#testo2").click(function() {

      $("#txt2").css("display","block");

   });

   $("#testo3").click(function() {

      $("#txt3").css("display","block");

   });

});
</script>

</head>

<body>

<div id="testo1">Esci fuori primo testo!</div>
  <div id="txt1">Eccomi..sono il primo testo uscito fuori..</div>

<div id="testo2">Esci fuori secondo testo!</div>
  <div id="txt2">Eccomi..sono il secondo testo uscito fuori..</div>

<div id="testo3">Ed esci fuori terzo testo!</div>
  <div id="txt3">Eccomi..sono il terzo ed ultimo testo uscito fuori..</div>


</body>
</html>

Questo andrà sicuramente. L'ho testato.

**cavicchiandrea** · 07-04-2011, 18:51

esempio base:

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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script>
function mostra(ele){
	//alert(ele);
	document.getElementById('_'+ele).style.visibility='visible';
}
function nascondi(ele){
	document.getElementById('_'+ele).style.visibility='hidden';
}
</script>
<style type="text/css">
.tastiDiv{
	color: #666;
	background-color: #CCC;
	float: left;
	height: 45px;
	width: 32%;
	margin-right: 5px;
	text-align:center;
	padding-top:25px;
}
.testoDiv{
	visibility: hidden;
	float: left;
	width: 32%;
	margin-right: 3px;
	border: 1px solid #CCC;
}
.clear{clear:both;}
</style>
</head>

<body>
<div id="main">
  <div id="uno" class="tastiDiv" onmouseover="mostra(this.id)" onmouseout="nascondi(this.id)"> tasto uno </div>
  <div id="due" class="tastiDiv" onmouseover="mostra(this.id)" onmouseout="nascondi(this.id)"> tasto due </div>
  <div id="tre" class="tastiDiv" onmouseover="mostra(this.id)" onmouseout="nascondi(this.id)"> tasto tre</div>
  <div class="clear"></div>
  <div id="_uno" class="testoDiv">testo uno</div>
  <div id="_due" class="testoDiv">testo due</div>
  <div id="_tre" class="testoDiv">testo tre</div>
</div>
</body>
</html>

**aledallas** · 08-04-2011, 09:59

fatto, funzione, perfetto.
grazie mille!

**walterdolce** · 08-04-2011, 10:33

Discussione: testo appare onmouseover [era: cerco script]

Strumenti discussione

Ricerca discussione

Visualizza

cerco script

Permessi di invio