Mostrare un box informativo passando su un testo

**fbartolom** · 22-02-2013, 11:39

Ho la necessità in un progetto web di mostrare un testo informativo quando l'utente passa con il mouse sopra una cella di una tabella. Ho provato a usare la soluzione descritta in:
Snook CSS solution
ma la direttiva in cima:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> usata nell'esempio mi deforma la pagina e senza di essa l'overlay non si apre in IE.
Inoltre in tutti i casi la tabella che include il testo si allarga rispetto le dimensioni impostate uscendo quindi dal frame che la include.

Sto quindi cercando una soluzione di minore impatto, possibilmente mediante script JS o un CSS un poco più locale e portabile sulle diverse piattaforme.
Qualcuno mi può aiutare?

Grazie,
Fabrizio Bartolomucci

**termopili** · 22-02-2013, 11:52

Ciao!

Non son un grande esperto, ma prova ad usare Jquery.

mettiamo che il testo lo metti dentro uno span con ID text, il DIV che deve comparire con ID div e l'overlay, se è a parte, ID overlay

poi fai una funzione jquery tipo:

codice:

$(document).ready(function() {
$("#text").mouseover(function()	{	$('#overlay, #div').fadeIn('fast');	});});

puoi anche mettere:
.css('display','block')
se non vuoi il fadeIn.

Poi aggiungi la funzione opposta (.mouseout, mi sembra) per farlo scomparire quando vai via dal testo e il gioco dovrebbe essere fatto.

Spero risolva il tuo problema.

Ciao.

**fbartolom** · 22-02-2013, 12:02

Originariamente inviato da termopili
Ciao!

Non son un grande esperto, ma prova ad usare Jquery.

mettiamo che il testo lo metti dentro uno span con ID text, il DIV che deve comparire con ID div e l'overlay, se è a parte, ID overlay

poi fai una funzione jquery tipo:

codice:

$(document).ready(function() {
$("#text").mouseover(function()	{	$('#overlay, #div').fadeIn('fast');	});});

puoi anche mettere:
.css('display','block')
se non vuoi il fadeIn.
Poi aggiungi la funzione opposta (.mouseout, mi sembra) per farlo scomparire quando vai via dal testo e il gioco dovrebbe essere fatto.
Spero risolva il tuo problema.
Ciao.

Ciao, grazie. Tuttavia più che poca esperienza di Jquery ho una conoscenza di esso... solo di nome.

La funzione la devo mettere dento il tag style e/o serve qualche altra direttiva o libreria apposita?
Non è che hai una pagina esempio dove sia utilizzata questa tecnologia, in modo simile a quella che ho riportato nel post originale così da permettermi di capire come usarla?

Quindi andando un poco a tentativi dopo aver guardato l'help me ne sono uscito con:

codice:

<table><tr><td ><span id="text"><div id="div">***</div> <div id="overlay">prodotto utilizzabile, limitatamente documentato e non adeguato agli attuali std</div></span></td></tr></table>

dopo aver messo in head:

codice:

<script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"> <script> $(document).ready(function() { $("#text").mouseover(function() { $('#overlay, #div').fadeIn('fast'); }); }); /script>

Ho messo tutti e due gli include in quanto deve funzionare su tutti i browser, ma non so se va bene.

Ma la cosa non funziona. Cosa ho sbagliato?

**termopili** · 22-02-2013, 12:15

lo script lo metti tra l'head come un normale script js, per cui <script type="text/javascript"> </script>
e poi basta che ti ricordi di mettere gli ID giusti ai tag giusti

Ti riscrivo lo script completo:

codice:

$(document).ready(function() {
$("#text").mouseover(function()	{	$('#overlay, #div').fadeIn('fast');	});
$("#text").mouseout(function()	{	$('#overlay, #div').fadeOut('fast');	});
});

Lo fatto al volo, può esserci qualcosa di errato, in ogni caso se non funzionasse basta che cechi mouseover o out Jquery su google e trovi tutto ciò che ti occorre.

Ciao

**fbartolom** · 22-02-2013, 12:38

Originariamente inviato da termopili
lo script lo metti tra l'head come un normale script js, per cui <script type="text/javascript"> </script>
e poi basta che ti ricordi di mettere gli ID giusti ai tag giusti

Ti riscrivo lo script completo:

codice:

$(document).ready(function() {
$("#text").mouseover(function()	{	$('#overlay, #div').fadeIn('fast');	});
$("#text").mouseout(function()	{	$('#overlay, #div').fadeOut('fast');	});
});

Lo fatto al volo, può esserci qualcosa di errato, in ogni caso se non funzionasse basta che cechi mouseover o out Jquery su google e trovi tutto ciò che ti occorre.

Ciao

Grazie di nuovo, ho sostituito il tuo codice a quello precedente.
Tuttavia penso il problema sia nella scrittura della parte che deve essere trovata dallo script. Ho usato questa forma:

codice:

<table><tr><td ><span id="text">*****</span> <div id="div">prodotto immediatamente utilizzabile, adeguato agli attuali std e opportunamente documentato</div></td></tr></table>

è giusta?

**termopili** · 22-02-2013, 12:50

si, sembra giusta. Che problema ti da?
Cmq io metterei il Div all'esterno con position absolute (ricordati che quello che lo contiene deve avere position relative) così hai maggiore possibilità di metterlo dove vuoi. Poi il #div deve essere display=none.

Fammi sapere.

**fbartolom** · 22-02-2013, 13:15

Originariamente inviato da termopili
si, sembra giusta. Che problema ti da?
Cmq io metterei il Div all'esterno con position absolute (ricordati che quello che lo contiene deve avere position relative) così hai maggiore possibilità di metterlo dove vuoi. Poi il #div deve essere display=none.
Fammi sapere.

Ok, non è che mi potresti correggere il codice che ti ho dato, così davvero vado a tentativi.
Il problema è che la cosa non funziona, i due testi vengono scritti uno sotto l'altro e quando passo il mouse sopra non succede nulla.
Una volta che questo succede penserò a spostare il l'overlay, se non mi piacerà, ma ora non vedo proprio nulla.

**fbartolom** · 22-02-2013, 13:39

Originariamente inviato da termopili
si, sembra giusta. Che problema ti da?
Cmq io metterei il Div all'esterno con position absolute (ricordati che quello che lo contiene deve avere position relative) così hai maggiore possibilità di metterlo dove vuoi. Poi il #div deve essere display=none.

Fammi sapere.

Ho messo il codice di prova distillato a:
Test page
Trovato! In effetti il codice funziona solo che parte l'overlay parte visualizzato. Come faccio a partire con il secondo testo nascosto. Poi tornerei al luogo dove mostrarlo, su come farlo multi righe e metterci un box intorno.

**termopili** · 22-02-2013, 13:51

Scusa, ho dato per scontato una cosa fondamentale: devi aggiungere anche il file jquery!!!
Metti nell'head

codice:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#text").mouseover(function()	{	$('#div').fadeIn('fast');	});
$("#text").mouseout(function()	{	$('#div').fadeOut('fast');	});
});
</script>

Poi io ho fatto questo esempio:
(questo va sempre tra gli head, ma è solo per l'esempio)

codice:

<style> 
body{ position:relative; height:1000px; width:100%; } 
#div{ position:absolute; display:none; width:200px; height:200px; margin-left:-100px; bottom:50%; left:50%; background:#000; color:#FFF; } 
</style>

Dentro al body:

codice:

<div id="div">prodotto immediatamente utilizzabile, adeguato agli attuali std e opportunamente documentato</div>

Poi nella tabella che hai fatto tu:

codice:

<span id="text">PIPPO</span>

Ma certamente senza il file Jquery Jquery non funziona!!!

Ciao

**fbartolom** · 22-02-2013, 14:02

Originariamente inviato da termopili
Scusa, ho dato per scontato una cosa fondamentale: devi aggiungere anche il file jquery!!!
Metti nell'head

codice:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#text").mouseover(function()	{	$('#div').fadeIn('fast');	});
$("#text").mouseout(function()	{	$('#div').fadeOut('fast');	});
});
</script>

Poi io ho fatto questo esempio:
(questo va sempre tra gli head, ma è solo per l'esempio)

codice:

<style> 
body{ position:relative; height:1000px; width:100%; } 
#div{ position:absolute; display:none; width:200px; height:200px; margin-left:-100px; bottom:50%; left:50%; background:#000; color:#FFF; } 
</style>

Dentro al body:

codice:

<div id="div">prodotto immediatamente utilizzabile, adeguato agli attuali std e opportunamente documentato</div>

Poi nella tabella che hai fatto tu:

codice:

<span id="text">PIPPO</span>

Ma certamente senza il file Jquery Jquery non funziona!!!

Ciao

In effetti l'avevo aggiunto: ma avevo messo sia quello di google che quello di microsoft e temo vano in conflitto. Poi proverà se quello di google funziona anche su IE e viceversa.
Ora il problema è che sulla pagina di prova che ti ho dato, ma anche mettendo il codice in testa alla pagina operativa funziona - per quanto mettendo l'overlay in una singola riga invece che in un bos - viceversa se la lascio all'interno della cella tella tabella, mostra tutto.
Per non visualizzare l'overlay ho messo l'hide all'interno della funziona, ma così comunque mi flasha.

Discussione: Mostrare un box informativo passando su un testo

Strumenti discussione

Ricerca discussione

Visualizza

Mostrare un box informativo passando su un testo

Permessi di invio