Accedi
Badges Disponibili
Ultimi Commenti
Ultimi Distintivi
Top 10 della Settimana
32 Messaggi - 24% |
23 Messaggi - 17% |
17 Messaggi - 13% |
13 Messaggi - 10% |
12 Messaggi - 9% |
11 Messaggi - 8% |
7 Messaggi - 5% |
7 Messaggi - 5% |
5 Messaggi - 4% |
5 Messaggi - 4% |
Cerca
Piccolo problema informatico
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à



Ultima modifica di symon96 il Sab 4 Feb 2017 - 23:01 - modificato 1 volta.
symon96Nome Habbo : simone156Amico
Messaggi : 12286
Re: Piccolo problema informatico
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

ricmanuNome Habbo : 000000100000
Messaggi : 7323
Re: Piccolo problema informatico
Ho voluto provarne a fare una versione anche io poi sta a te scegliere qual'e' meglio per il tuo fine 

- 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>
megabillasNome Habbo : megabillas
Messaggi : 3174
Re: Piccolo problema informatico
Grazie mille ad entrambi, proverò i metodi e vi farò sapere 

symon96Nome Habbo : simone156Amico
Messaggi : 12286
Re: Piccolo problema informatico
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)

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)
MattiaNome Habbo : kaselli
Messaggi : 75094
Re: Piccolo problema informatico
Grazie mille a tutti, dopo un po' di fatica e problemini su alcuni punti ci siamo riusciti




symon96Nome Habbo : simone156Amico
Messaggi : 12286
Pagina 1 di 1
» [SPECIAL GAME] Esito: Quiz di Cultura Generale!
» [HLF GAME] Esito Missione: Buona Domenica!
» [SPECIAL GAME] Esito Missione: Labirinto e traccia la strada!
» [HLF GAME] Esito Missione: Le differenze!
» Soluzione gioco Scuola di Moda - Fermate i Paparazzi #5
» "Libro di Habbo" "Guardians" Ep.60 Il Pianeta Pàgos
» [HLF LOTTERIA] Life Poker!
» Reinserito affare stanza la Baita in catalogo su Habbo
» Calendario Regali di Aprile 2021 su Habbo
» Domande sui BOT di Habbo
» Competizione globale Fashion Design di Habbo
» Indumenti a tema detective ed età vittoriana su Habbo
» Immagini campagna moda e Pasqua di Aprile 2021
» Furni a tema età Vittoriana e detective su Habbo