Immagini hover con effetto testo che cambia

**makikaz** · 25-03-2010, 14:51

Ciao,
avevo intenzione di creare una pagina in cui sono visualizzate 3 immagini.

Al passaggio del mouse su un'immagine devo fare comparire un testo descrittivo dell'immagine in uno spazio posto al di sotto delle tre immagini....

Chiaramente ogni immagine ha un testo diverso...

Qualcuno mi da una mano ad impostarlo ?

Grazie.

**mexican** · 25-03-2010, 17:11

Originariamente inviato da makikaz
Ciao,
avevo intenzione di creare una pagina in cui sono visualizzate 3 immagini.

Al passaggio del mouse su un'immagine devo fare comparire un testo descrittivo dell'immagine in uno spazio posto al di sotto delle tre immagini....

Chiaramente ogni immagine ha un testo diverso...

Qualcuno mi da una mano ad impostarlo ?

Grazie.

dovresti usare javascript.
Fare due div uno per l'img e uno sotto per il testo.
Assegni un Id al dive del testo e poi tramite js gli assegni il testo.

**Mich_** · 25-03-2010, 18:14

Originariamente inviato da mexican
dovresti usare javascript.
Fare due div uno per l'img e uno sotto per il testo.
Assegni un Id al dive del testo e poi tramite js gli assegni il testo.

Si puo` fare anche con solo CSS.
E` la stessa tecnica usata nelle gallerie, e nei menu a tab:

codice:

HTML:
<div id="contenitore">
  <a id="linkImg1" href="#">
    <img src"immagine1.gif" alt="...">
    <span>testo per immagine 1</span>
  </a>
  <a id="linkImg2" href="#">
    <img src"immagine2.gif" alt="...">
    <span>testo per immagine 2</span>
  </a>
  <a id="linkImg3" href="#">
    <img src"immagine3.gif" alt="...">
    <span>testo per immagine 3</span>
  </a>
</div>

CSS:
#contenitore {
  ...  /* definire width e height  (non e` necessario, ma aiuta) */
  position: relative;
}
#contenitore a {
  display: block;
}
#contenitore a img {
  border: 0;
}
#contenitore a span {
  display: none;
}
#contenitore a:hover span {
  display: block;
  position: absolute;
  bottom: 0;
  /* posizionare in orizz o eventualmente centrare */
}

Questo funziona (quasi) uguale anche in IE6. Se non deve funzionare in IE6, non occorre usare i link (sempre che non servano per altri scopi, e il tutto si semplifica un po')

**makikaz** · 25-03-2010, 18:32

Grazie...è proprio quello che cercavo !!

**makikaz** · 29-03-2010, 10:48

Sono ancora qui...l'ho provato...c'è ancora qualcosina da sistemare...

In pratica quando io passo il mouse sull'iimagine mi viene visualizzato il testo che però è sotto forma di link. Io vorrei che comparisse una descrizione del testo normale...
Oltretutto ho provato a fare un testo lungo e questo va fuori da contenitore delle tre immagini...Io vorrei farlo rimanere all'interno del box che ho creato.
Ho fatto un pò di prove..ma non sono espertissimo con i CSS...mi date ancora una mano ?

Allego il mio codice :

<html>
<head>
<style type="text/css">
#contenitore {
margin:50px;
height:300px;
width:500px;
border:5px solid #000000;
... /* definire width e height (non e` necessario, ma aiuta) */
position: relative;
}
#contenitore a {
display: block;
}
#contenitore a img {
border: 0;
}
#contenitore a span {
display: none;
}
#contenitore a:hover span {
display: block;
position: absolute;

}
/* posizionare in orizz o eventualmente centrare */
div.img
{
margin:2px;
border:1px solid #0000ff;
height:auto;
width:auto;
float:left;
text-align:center;
}
div.img img
{
display:inline;
margin:3px;
border:1px solid #ffffff;
}
div.img a:hover img
{
border:1px solid #0000ff;
}
img
{
opacity:0.4;
filter:alpha(opacity=40);
}
</style>

<body>
<div id="contenitore">
<div class="img">
<a id="linkImg1" href="#">

[img]klematis_small.jpg[/img]

<span>testo per immagine 1 testo per immagine 1
testo per immagine 1 testo per immagine 1
testo per immagine 1 testo per immagine 1
testo per immagine 1 testo per immagine 1
testo per immagine 1 testo per immagine 1
testo per immagine 1 testo per immagine 1</span>

</a>

</div>
<div class="img">
<a id="linkImg2" href="#">
[img]klematis2_small.jpg[/img]
<span>testo per immagine 2</span>
</a>
</div>
<div class="img">
<a id="linkImg3" href="#">
[img]klematis3_small.jpg[/img]
<span>testo per immagine 3</span>
</a>
</div>
</div>

</body>
</head>
</html>

**Mich_** · 29-03-2010, 11:31

Anzitutto noto che hai mescolato il mio metodo con un metodo simile realizzato con JS.
Questo comporta un po' di confusione, che complica il capire come fare.

La tecnica solo-CSS necessita (per poter funzionare in tutti i browser) che l'oggetto sia un link.
Se non serve che funzioni nelle vecchie versioni di IE si puo` realizzare senza il link.
Il mio consiglio e` di eliminare il JS e realizzare la cosa tramite CSS.

Comunque i vari pezzi si possono formattare indipendentemente.
Tu dici: << viene visualizzato il testo che però è sotto forma di link>>
Questo significa che non hai formattato il pezzo (ma hai lasciato la formattazione default del browser).

Tu dici: <<questo va fuori da contenitore delle tre immagini>>
Vuol dire che hai formattato la cosa troppo rigida: se non specifichi le altezze, queste si regolano in modo automatico a seconda dello spazio necessario. Pero` occorre verificare come sono gli oggetti che seguono e come vengono spostati (sto dicendo che ci possono essere effetti collaterali non belli, ma occorre vedere come deve diventare).

**makikaz** · 29-03-2010, 11:47

Ciao,
il JS mi crea solo l'effetto opacità sulle foto....tra l'altro l'ho trovato in un sito in cui si parlava di vari esempi di CSS...non mi sembrava un codice JS a parte forse gli eventi del mouse...

nella definizione del contenitore

#contenitore {
margin:50px;
height:300px;
width:500px;
border:5px solid #000000;
}

ho dato le dimensioni dell'altezza e della larghezza...io speravo di fare rientrare il testo di ogni
singola immagine qui dentro in maniera parametrica...nel senso che se dovessi spostare / ridimensionare il contenitore il testo si deve adattare.

Ti chiedo scusa ma non capisco cosa intendi quando mi dici che devo formattare il testo per non renderlo "link".....purtroppo non sono esperto.ho qualche nozione e con questa sto cercando di arrabattarmi..

Riesci a darmi qualche riga di esempio oppure qualche sito dove posso trovare delle indicazioni / esempi per riuscire a risolvere ?

**Mich_** · 29-03-2010, 12:33

Anzitutto perche` usi il JS per una cosa che si puo` fare altrettanto bene (forse meglio) con solo CSS?
E perche` applichi il JS sulle immagini, quando il CSS lavora invece sul link? Sono tutte cose che aumentano la complicazione della cosa che stai realizzando. Usa UNA tecnica, ed applica tutti gli attributi CSS usando lo stesso metodo.

La tecnica e` quella che viene usata nelle gallerie o nei menu a tab (solo-CSS). Ce ne sono vari in giro per la rete (ed anche tra i "link utili").

speravo di fare rientrare il testo di ogni singola immagine qui dentro in maniera parametrica

Vuol dire che se e` piu` grande deve sovrapporsi a qualcosa? Ti basta definire il bottom, come avevo consigliato nel codice che avevo postato (ed eventualmente sistemare lo z-index).
Tieni presente che questo puo` avere effetti collaterali se il blocco che viene visualizzato va a finire sotto il puntatore del mouse.

Per formattare, intendo definire colore e aspetto del blocco.
Nel tuo caso devi definire anche:

codice:

#contenitore a:hover span {
  display: block;
  position: absolute;
  bottom: 0;
  color: black;
  text-decoration: none;
}

PS: usa il bottone # per inserire il codice, altrimenti perde la formattazione ed e` difficile da interpretare
}

Discussione: Immagini hover con effetto testo che cambia

Strumenti discussione

Ricerca discussione

Visualizza

Immagini hover con effetto testo che cambia

Re: Immagini hover con effetto testo che cambia

Re: Re: Immagini hover con effetto testo che cambia

Permessi di invio