Piccolo problema informatico

Da **symon96** il Sab 4 Feb 2017 - 18:48

Salve a tutti ragazzi, apro questa discussione (su consiglio di tia, con cui ho gia parlato dandomi qualche dritta) per esporre il mio piccolo problema. Premetto che so poco e niente dei vari linguaggi di programmazione e anzi in generale non sono molto ferrato in ambito informatico; detto questo mia sorella (lei sa peggio di me) deve svolgere una ricerca scolastica e aveva intenzione di inserire delle immagini con il testo che appariva al passaggio del mouse, il problema sorge nel font di questo testo, nel senso scrivere una parte di esso in grassetto. Tia mi ha sottolineato il fatto che attraverso il linguaggio HTML (che è quello che uso principalmente quando serve) non è possibile fare ciò, consigliandomi di passare al linguaggio CSS e ad altre soluzione un po' più elaborate. Ora vi chiedo (a tutti coloro che se la cavicchiano almeno un po' in questo ambito) se c'è qualcuno che possa aiutarci magari spiegando qualche passaggio e/o inviandomi dei codici fondamentali per poter riuscire in questa piccola impresa. Ringrazio a chi mi aiuterà Piccolo problema informatico 2800533321

Da **ricmanu** il Dom 5 Feb 2017 - 12:06

Per prima cosa nei tag <head></head> devi mettere i seguenti codici (le parti in grassetto sono quelle che puoi cambiare):

immagine1 {
float: left;
background-image: url('Link immagine senza testo');
height: altezza immagine in pixel (esempio: 56px);
width: larghezza immagine in pixel (esempio: 56px);
}
immagine1:hover {
background-image: url('link immagine');
}

Poi nel body metteti il seguente codice:

<div id="immagine1_popup" style="display: none;
background-color: rgba(mettere colore dello sfondo del box dove si vuole la scritta in rgba);
border: 5px solid rgba(0, 0, 0, 0.2);
width: grandezza del box del messaggio;
float: right;
height: 50px;
border-radius: 10px;
position: relative;
top: distanza dall'alto della pagina in pixel (es: 50px);
left: distanza dal bordo sinistro della pagina in pixel (es. 50px);
color: rgba(0, 0, 0, 0.7);
font-size: grandezza del font di scrittura;
padding: 10px;
text-align: center;
z-index: 9000;">

<table style="width:100%;
height:100%;">
<tr><td><cufontext>Testo che si vuole che compaia</cufontext></td></tr></table>
</div>

In teoria è tutto se hai problemi scrivvimi un mp che solitamente non rileggo i commenti alle vecchie conversazioni Piccolo problema informatico 1826136131

Da **megabillas** il Dom 5 Feb 2017 - 15:33

Ho voluto provarne a fare una versione anche io poi sta a te scegliere qual'e' meglio per il tuo fine Piccolo problema informatico 126469808

Codice:: <style> .testo{ display:none; font-weight:bold; width:100%; } .imgtesto{ width:500px; height:500px; background:url("URL IMMAGINE") no-repeat; background-size: cover; text-align:center; overflow:hidden; } .imgtesto:hover .testo{ display:block; cursor:pointer; } </style> <div class="imgtesto"><div class="testo">Testo immagine</div></div>

Da **symon96** il Dom 5 Feb 2017 - 23:56

Grazie mille ad entrambi, proverò i metodi e vi farò sapere Piccolo problema informatico 1765539963

Da **Mattia** il Lun 6 Feb 2017 - 14:46

Ehi ciao

il metodo suggerito da megabillas penso possa andar bene, poi ovviamente tramite CSS e HTML uno lo modifica ottenendo il risultato finale desiderato!

Altrimenti, come ti dicevo, un'altra soluzione sarebbe usare i tooltip, però c'è bisogno anche di un po' di javascript e inoltre anche in questo caso spesso il contenuto del tooltip non risente della formattazione.

Facci sapere se hai avuto difficoltà, dubbi o hai bisogno di qualche consiglio su come migliorare il precedente codice (specialmente in relazione all'immagine da te usata)