Testo a comparsa con passaggio del mouse

[Barierta]

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]

Puoi fare in questo modo, si potrebbe abbreviare ma almeno così si capisce:
Immagine (scompare quando passo sopra col mouse):

<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ì:

<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]

Puoi fare in questo modo, si potrebbe abbreviare ma almeno così si capisce:
Immagine (scompare quando passo sopra col mouse):

<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ì:

<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?

 

[Tommy03]

Ok, domani faccio una prova e ti dico

 

[Barierta]

Grazie!

 

[marino51]

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

<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>

 

[Tommy03]

Giusto, hai ragione!

 

[Max 1]

>

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

Spesto in javascript

 

[Barierta]

>

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

<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]

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:

<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):

<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)

<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]

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]

@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

 

[marino51]

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

in realtà il codice é html integrato con javascript
la discussione é javascript
saluti

 

[DianaGreece49]

Grazie!

 

[princebhaini8]

Grazie

 

[princebhaini8]

Probabilmente commetto un errore di sintassi da qualche parte o c'è qualcosa in conflitto e non me ne accorgo

 

[iTonto]

<body>
    <p class="text">
        W LA PATATA! : )
    </p>
</body>

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

.text.show {
    opacity: 1;
}

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

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

 

[MarcoGrazia]

Si possono anche usare i soli CSS per fare la stessa cosa.
Ad esempio data una pagina fatta così...

<!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

            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.