contenuto paragrafo variabile

**GabMus** · 09-08-2012, 00:44

Vado subito al sodo con il mio primo post

Ho tre immagini che al click dovranno mostrare un testo diverso all'interno di un paragrafo.

Le faccine colorate sono le immagini, TESTO è il paragrafo.
Sostanzialmente se premo

deve spuntare TESTO, se premo

spunta HELLO, se premo :P spunta WORLD.

Pur avendo conoscenze di HTML e CSS, per favore, spiegatemelo nel modo più semplice possibile.

Grazie a tutti in anticipo

**Vincent.Zeno** · 09-08-2012, 01:26

è un'operazione che svolgi con l'aiuto di javascript
la sostanza di quello che cerchi è utilizzata in ambiti differenti: gallerie immagini, tabs, annotazioni...

qui un esempio di base:
http://www.html.it/articoli/mostranascondi-1/

sposto in javascript, buon lavoro

**ricman** · 09-08-2012, 01:26

Originariamente inviato da GabMus
Pur avendo conoscenze di HTML e CSS, per favore, spiegatemelo nel modo più semplice possibile.

Fra l'altro html e css non ti bastano. Ci vuole pure il javascript.

Col js quando clicchi (si chiama "onclick") dovrai nascondere degli elementi e mostrare qualcosaltro. I tuoi elementi saranno i tag.

Per esempio qui ci sono spiegate molte cose con tanto di codice ed esempi.

**carlomarx** · 09-08-2012, 02:14

Originariamente inviato da ricman
Fra l'altro html e css non ti bastano. Ci vuole pure il javascript.

Sicuro? Non solo i css gli bastano, ma gli consiglio vivamente di usare solo quelli. Ci sono almeno due modi per ottenere quello che vuole coi soli CSS.

Modo #1 (canonico):

codice:

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Esempio</title>
<style type="text/css">
a.exp_button img {
	width: 45px;
	height: 45px;
	border: 0;
}

.my_text {
	display: none;
	font-size: 24px;
	color: blue;
}

.my_text:target { display: block; }
</style>
</head>

<body>




	[img]http://forum.html.it/forum/images/smilies/smile.gif[/img]
	[img]http://forum.html.it/forum/images/smilies/frown.gif[/img]
	[img]http://forum.html.it/forum/images/smilies/fiore.gif[/img]
</p>

<p id="sorriso" class="my_text">Testo</p>
<p id="cupo" class="my_text">Hello</p>
<p id="fiore" class="my_text">World!</p>

</body>

</html>

Modo #2 (creativo):

codice:

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Esempio</title>
<style type="text/css">
input.expand { display: none; }

label.exp_button { cursor: pointer; }

label.exp_button img {
	width: 45px;
	height: 45px;
}

.my_text {
	display: none;
	font-size: 24px;
	color: blue;
}

input.expand:checked + .my_text {
	display: block;
}
</style>
</head>

<body>




	<label for="sorriso" class="exp_button">[img]http://forum.html.it/forum/images/smilies/smile.gif[/img]</label>
	<label for="cupo" class="exp_button">[img]http://forum.html.it/forum/images/smilies/frown.gif[/img]</label>
	<label for="fiore" class="exp_button">[img]http://forum.html.it/forum/images/smilies/fiore.gif[/img]</label>
</p>

<input type="radio" name="immagine" id="sorriso" class="expand" />
<p class="my_text">Testo</p>

<input type="radio" name="immagine" id="cupo" class="expand" />
<p class="my_text">Hello</p>

<input type="radio" name="immagine" id="fiore" class="expand" />
<p class="my_text">World!</p>

</body>

</html>

Il secondo metodo ha il pregio (o difetto, dipende da quello che vuole ottenere) di non cambiare l'hash della pagina. Ma è un po' più macchinoso...

**GabMus** · 09-08-2012, 08:58

[...]
Il secondo metodo ha il pregio (o difetto, dipende da quello che vuole ottenere) di non cambiare l'hash della pagina. Ma è un po' più macchinoso...

GRAZIE MILLE!!! Avevo già visto altri siti web che sfruttavano l'hash della pagina per mostrare e nascondere contenuti! È proprio quello che cercavo, ti ringrazio tantissimo

Un'altra cosa visto che ci siamo. So che con HTML5 e CSS3 è possibile dare a queste scomparse una dissolvenza. Sapete come si fa?

**carlomarx** · 09-08-2012, 14:05

Originariamente inviato da GabMus
Un'altra cosa visto che ci siamo. So che con HTML5 e CSS3 è possibile dare a queste scomparse una dissolvenza. Sapete come si fa?

Mai fatto. Quindi mi sa che ti toccherà spulciarti questa guida: https://developer.mozilla.org/en-US/...CSS_animations. O qualsiasi altra.

**ricman** · 09-08-2012, 14:34

Originariamente inviato da carlomarx
Sicuro? Non solo i css gli bastano, ma gli consiglio vivamente di usare solo quelli.

Si.

Tu suggerisci html5/css3 (che sta un'altra sezione del forum). Quindi può incorrere anche in qualche problemuccio (a seconda del target), ma lui aveva postato in html (che per esclusione si può dire che il 4)

**GabMus** · 09-08-2012, 15:51

Allora, mi sono documentato e alla fine sono riuscito a realizzare tutto. Ringrazio tutti voi del vostro prezioso aiuto. Se volete vedere il risultato: http://www.italiaunix.com/informazioni.html

Va fatta ancora qualche piccola modifica ma ci siamo ;D

**carlomarx** · 09-08-2012, 16:34

Originariamente inviato da GabMus
Allora, mi sono documentato e alla fine sono riuscito a realizzare tutto. Ringrazio tutti voi del vostro prezioso aiuto. Se volete vedere il risultato: http://www.italiaunix.com/informazioni.html

Va fatta ancora qualche piccola modifica ma ci siamo ;D

Complimenti per il sito. Verrò a trovarvi ogni tanto.

Uso quotidianamente Arch Linux

Buona fortuna

**GabMus** · 09-08-2012, 17:07

Originariamente inviato da carlomarx
Complimenti per il sito. Verrò a trovarvi ogni tanto.

Uso quotidianamente Arch Linux

Buona fortuna

Grazie del supporto

Discussione: contenuto paragrafo variabile

Strumenti discussione

Ricerca discussione

Visualizza

contenuto paragrafo variabile

Re: contenuto paragrafo variabile

Permessi di invio