Testo a comparsa con passaggio del mouse

Barierta

Nuovo Utente
27 Mar 2021
6
1
1
Salve a tutti!
Sto cercando di creare un box di testo che appaia e scompaia al passaggio del mouse.
Con le immagini sono riuscita facilmente a risolvermi il problema, ma con il testo non so da che parte sbattere la testa ò.ò

Con le immagini ho usato questo codice:
<img border=”0” style="width:100%; max-width:400px" src="..." onmouseover="...';"onmouseout="this.src='...';" title="..." alt="."/>

Esiste qualcosa del genere che funzioni anche per il testo?
Grazie!!
 

Tommy03

Utente Attivo
6 Giu 2018
616
58
28
20
Vicenza
Puoi fare in questo modo, si potrebbe abbreviare ma almeno così si capisce:
Immagine (scompare quando passo sopra col mouse):
HTML:
<img onmouseover="scomparsa(this)" onmouseout="comparsa(this)" src="image.png">

<script>
function comparsa(x) {
  x.style.display = "block";
}
function scomparsa(x) {
  x.style.display = "none";
}
</script>

Per il testo puoi fare così:
HTML:
<script>
document.getElementById("testo").onmouseover = function() {togli()};
document.getElementById("testo").onmouseout = function() {mostra()};
function togli() {  document.getElementById("testo").style.display = "none";
}
function mostra() {  document.getElementById("testo").style.display = "block";
}
</script>

<p id="testo">Il mio testo</p>
Cosi dovrebbe funzionare, non so se si può fare come nell'img, cioè mettere onmouseover e onmouseout direttamente come attributi dentro a <p>, pero cosi penso che funzioni anche se sono un paio di righe in piu
 

Barierta

Nuovo Utente
27 Mar 2021
6
1
1
Puoi fare in questo modo, si potrebbe abbreviare ma almeno così si capisce:
Immagine (scompare quando passo sopra col mouse):
HTML:
<img onmouseover="scomparsa(this)" onmouseout="comparsa(this)" src="image.png">

<script>
function comparsa(x) {
  x.style.display = "block";
}
function scomparsa(x) {
  x.style.display = "none";
}
</script>

Per il testo puoi fare così:
HTML:
<script>
document.getElementById("testo").onmouseover = function() {togli()};
document.getElementById("testo").onmouseout = function() {mostra()};
function togli() {  document.getElementById("testo").style.display = "none";
}
function mostra() {  document.getElementById("testo").style.display = "block";
}
</script>

<p id="testo">Il mio testo</p>
Cosi dovrebbe funzionare, non so se si può fare come nell'img, cioè mettere onmouseover e onmouseout direttamente come attributi dentro a <p>, pero cosi penso che funzioni anche se sono un paio di righe in piu
Uhm...
Non sto riuscendo a farlo funzionare. Sto usando un simulatore in tempo reale (htmledit.squarefree.com) e facendo un becero copia-incolla non mi funziona.
Possibile che ci sia qualcosa da modificare che nella mia ignoranza non so di dover modificare?
Oppure è meglio che non usi il "simulatore" su cui sto provando?
 

marino51

Utente Attivo
28 Feb 2013
3.203
207
63
Lombardia
Ok, domani faccio una prova e ti dico
ho anteposto il paragrafo al relativo script e confermo il funzionamento

poi, mi sono chiesto quale ragione imponeva di usare usare due metodi diversi e così funziona anche "a modo mio"
con uno script più "generale"
ovviamente grazie a te Tommy

HTML:
<img id="immagine" onmouseover="scomparsa(this)" onmouseout="comparsa(this)" src="../SharonExorcist.png"><br /><br />

<p id="testo" onmouseover="scomparsa(this);" onmouseout="comparsa(this);">La mia prova</p><br /><br />

<script>
function comparsa(x) { x.style.display = "block"; }

function scomparsa(x) { x.style.display = "none"; }
</script>
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.449
338
83
>

A tutti
Se il codice è JS bisogna usare il tag javascrispt per postare il codice nob html

Spesto in javascript
 

Barierta

Nuovo Utente
27 Mar 2021
6
1
1
>

A tutti
Se il codice è JS bisogna usare il tag javascrispt per postare il codice nob html

Spesto in javascript
Pardon, chiedo scusa >3<

ho anteposto il paragrafo al relativo script e confermo il funzionamento

poi, mi sono chiesto quale ragione imponeva di usare usare due metodi diversi e così funziona anche "a modo mio"
con uno script più "generale"
ovviamente grazie a te Tommy

HTML:
<img id="immagine" onmouseover="scomparsa(this)" onmouseout="comparsa(this)" src="../SharonExorcist.png"><br /><br />

<p id="testo" onmouseover="scomparsa(this);" onmouseout="comparsa(this);">La mia prova</p><br /><br />

<script>
function comparsa(x) { x.style.display = "block"; }

function scomparsa(x) { x.style.display = "none"; }
</script>
Funonzia!!
Ho solo un dubbio... Il codice che avevo usato io teneva da conto tre "cose", la prima che viene visualizzata appena si carica la pagina, la seconda che si vede quando si passa il cursore sopra, e la terza che si vede quando il cursore viene spostato dall'area.
Ipotizzando che la prima e la terza "cosa" siano vuote, quindi uno spazio vuoto su cui dovrebbe apparire un testo al passaggio del mouse e da cui dovrebbe scomparire appena il mouse punta altrove, come dovrei fare?
Perchè quello qui sopra mi mostra il testo al caricamento della pagina, poi al passaggio del mouse lo fa scomparire e non riappare più.

Grazie mille ancora!
 

Tommy03

Utente Attivo
6 Giu 2018
616
58
28
20
Vicenza
A tutti
Se il codice è JS bisogna usare il tag javascrispt per postare il codice nob html
Va bene, chiedo scusa, non me ne ero accorto

Comunque:
Allora, l'attributo CSS che permette di visualizzare o meno un elemento è display, che può essere display:block (è di default, l'elemento viene visualizzato) oppure display:none (l'elemento non viene visualizzato). Quindi per gestire l'elemento al caricamento della pagina, devi usare soltanto CSS, se lo vuoi visibile non fai niente, altrimenti aggiungi style="display: none" dentro a <p>. Javascript, invece, si occupa della parte "dinamica" (cioè ciò che avviene quando l'utente fa qualcosa, dopo che la pagina è stata caricata). Nel tuo caso le azioni che devono modificare l'elemento (cioè mostrarlo o farlo sparire) sono quando il mouse passa sopra ad esso oppure quando lo abbandona. Quindi per gestire questi eventi, richiami delle funzioni, e sta a te decidere cosa vuoi che accada quando l'utente passa sopra o passa fuori.
Facciamo un esempio: vuoi un testo che inizialmente sia invisibile, e deve diventare visibile al passaggio del mouse, e successivamente diventare nuovamente invisibile quando il mouse lo abbandona. In questo caso, dato che all'inizio non deve vedersi, metti:
HTML:
<p style="display:none;" id="testo">Testo</p>
Poi il testo deve comparire quando ci passi sopra, quindi richiami la funzione comparsa(this) (che in pratica si occupa di porre display: block su un determinato elemento):
HTML:
<p style="display:none;" id="testo" onmouseover="comparsa(this)">Testo</p>
Infine, vuoi che quando il mouse abbandona l'elemento, l'elemento deve scomparire, allora richiami la funzione scomparsa(this) (che pone display:none su un determinato elemento)
HTML:
<p style="display:none;" id="testo" onmouseover="comparsa(this)" onmouseout="scomparsa(this)">Testo</p>
Tutto questo procedimento funzionera in modo continuativo (cioè se passi sopra, poi fuori, poi di nuovo sopra, il testo compare di nuovo).

Spero sia sia capito, buona serata
 

Barierta

Nuovo Utente
27 Mar 2021
6
1
1
Ti ringrazio, perchè adesso la teoria mi è finalmente chiara!
Eppure quando faccio le prove, non funziona come dovrebbe... Probabilmente faccio un errore di sintassi da qualche parte o c'è qualcosa che va in conflitto e non me ne sto accorgendo...
In ogni caso grazie mille!
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.449
338
83

@Tommy03

Anche se il tag è sbagliato viene visualizzato tutto ugualmente!
Il tag serve solo per una maggiore leggibilità.
Se il coidice è misto o non esite un tag per quel codice si usa il tag generico
 
  • Like
Reactions: Tommy03

princebhaini8

Nuovo Utente
20 Ago 2021
8
1
3
Probabilmente commetto un errore di sintassi da qualche parte o c'è qualcosa in conflitto e non me ne accorgo
 

iTonto

Utente Attivo
8 Feb 2018
107
2
18
www.fiverr.com
HTML:
<body>
    <p class="text">
        W LA PATATA! : )
    </p>
</body>

CSS:
.text {
    color: #000;
    opacity: 0;
    transition: opacity .4s ease;
}

.text.show {
    opacity: 1;
}

JavaScript:
const text = document.querySelector('.text');

text.addEventListener('mouseover', () => text.classList.toggle('show'));
 

MarcoGrazia

Utente Attivo
15 Dic 2009
852
20
28
62
Udine
www.stilisticamente.com
Si possono anche usare i soli CSS per fare la stessa cosa.
Ad esempio data una pagina fatta così...
HTML:
<!DOCTYPE html>
<html lang="it" dir="ltr">
    <head>
        <title>Prova</title>
    </head>
    <body>
        <ul>
            <li><a href="#ciccio">Ciccio<span>Figlio di Nonna Papera</span></a></li>
            <li><a href="#pluto">Pluto<span>Cane di Pippo</span></a></li>
            <li><a href="#paperino">Paperino<span>Figlio di... lasciamo stare va!</span></a></li>
        </ul>
    </body>
</html>
a cui associamo queste poche righe di foglie di stile
CSS:
            a {
                position: relative;
                color: blue;
                z-index: 10;
            }
            a > span {
                display: none;
                position: absolute;
                min-width: 200px;
                min-height: 20px;
                border: 1px solid #333;
                color: #333;
                background-color: #F0F0F0;
                z-index: 200;
            }
            a:hover > span {display: block; z-index: 20;}
In pratica, scritto il tooltip nell'elemento span, questo apparirà al passaggio del mouse sotto l'ancora, e sparirà quando si esce dal link.
C'è solo un fastidioso problema con lo z-index che non sono ancora riuscito a risolvere.
 
Discussioni simili
Autore Titolo Forum Risposte Data
braccobaldo Google e testi a comparsa: penalizzazione per testo nascosto? SEO e Posizionamento 1
J Comparsa di testo al passaggio del mouse sopra un'immagine Javascript 0
B comparsa quadratini all'interno del testo HTML e CSS 2
I salvare testo chat PHP 4
E Creare un testo trasparente dietro un div HTML e CSS 5
S da casella di testo a campo tabella Database 0
A Ottenere sfumatura su testo Photoshop 8
M Mostrare testo (o parte di esso) in base a utente PHP 0
F Animazione testo sito web diminuire grandezza di un testo allo scroll Javascript 0
D Rendere testo cliccabile PHP 3
D Casella di testo con grassetto ecc... HTML e CSS 2
Couting95 inserire dati da un file di testo in una tabella in php PHP 1
D Aiuto CSS in ELEMENTOR - Cambiare un testo CMS (Content Management System) 0
V Mailchimp - box di testo: cambia da solo il testo inserito Email Marketing 2
G grandezza testo HTML e CSS 4
D Testo colorato in base a giorno settimana PHP 12
S Testo scrolla su immagine che cambia HTML e CSS 0
S impostare un testo e una img nella stessa riga con jsPDF Javascript 0
R Nome input testo+variabile PHP 1
A Errore visualizzazione selezione testo Photoshop 0
Alex_70 Cerca testo all'interno di una stringa PHP 5
A Estrapolare parti di testo con PHP PHP 2
G Testo in mysql format 3 MySQL 0
G Box con testo casuale WordPress 1
G Modifica testo Photoshop 3
Y Colore sfondo testo Javascript 0
seranto [ASP] Controllare il testo inserito in Textarea Classic ASP 6
S [HTML] Effetto su testo da togliere HTML e CSS 0
A [WordPress] Recuperare testo articoli da sito danneggiato WordPress 1
A [HTML] Testo mail non visualizzabile su IOS HTML e CSS 0
R Bootstrap 4 - creare una finestra di testo responsive sopra un Carousel jQuery 1
Gabriele15497514 php testo errato durante la lettura del file txt quando lo script viene eseguito contemporaneamente PHP 3
I Creare Qsl radioamatore con testo editabile Presentati al Forum 1
Cosina [PHP] Cancellare una riga da un file di testo in base al nome PHP 2
Shyson [MySQL] Sostituire testo in in articolo MySQL 0
kikdirty Testo e perfezioni il tuo sito dando il massimo del punteggio seo Offerte e Richieste di Lavoro e/o Collaborazione 0
D [Visual Basic] [MS Access] query con parametro di testo Visual Basic 4
R [HTML] Effetto carousel di testo su immagine fissa HTML e CSS 2
Shyson [PHP] Inserire testo nel codice PHP 2
R [PHP] Testo su immagine al passaggio del mouse PHP 2
I Allineare due righe di testo in photoshop Photoshop 2
V [Photoshop] Testo starato Photoshop 1
A [MS Access] Somma Campi se in altro campo presente un determinato testo MS Access 1
G riscrivere testo photoshop Photoshop 1
Cosina Andare a capo nel testo della mail ricevuta dal form php PHP 1
Trapano [PHP] Testo in grassetto quando rilevo modifiche PHP 2
B [PHP] Elimina quindi aggiungi una riga in un file di testo PHP 0
C [PHP] Scrivere testo su immagine PHP 3
D [Javascript] [HTML] Evidenziare testo di una text Javascript 1
F INSERIRE IN UN'UNICA CASELLA DI TESTO REPORT ACCESS I VALORI DELLA TABELLA DI UN'INTERA COLONNA MS Access 2

Discussioni simili