Commenti alle immagini

[Andrea85]

Salve a tutti.

Vorrei fare una cosa di questo tipo:

Visualizzare una finestrella contenente un messaggio testuale, al passaggio del cursore su un immagine.

Avete presente i commenti scritti sulla voce "alt" dei tag immagine ?

Vorrei qualcosa di simile.

Consigli ?

Sono riuscito a creare una cosa del genere, modificando(con un compilatore) un menu a comparsa creato con fireworks 8.
Ho cancellato il parametro HREF dal menù, così da visualizzare solamente il testo.
In parole povere, ho tolto il parametro del link.
Funziona perfettamente, ma.............fatto in questo modo mi sembra una cosa di basso livello.

Si può fare in maniera diversa ?

Grazie

[alexba64]

[img]tuaimmagine.jpg[/img]

[Ruben Elmo]

O fai come ha detto alexba64 oppure datti al JavaScript per avere un aspetto grafico a livello più alto (Occhio però che il JS appesantisce la pagina)

[Andrea85]

Originariamente inviato da alexba64

[img]tuaimmagine.jpg[/img]

Ho detto: SIMILE all' "alt".

Grazie lo stesso.
Sto smanettando con il rollover, ma con scarsi risultati......

[Andrea85]

Originariamente inviato da Ruben Elmo
O fai come ha detto alexba64 oppure datti al JavaScript per avere un aspetto grafico a livello più alto (Occhio però che il JS appesantisce la pagina)

Si. Stavo pensando la stessa cosa.
Pensavo di crearmi una tabella e poi richiamarla mediante uno script.
C'è solo un problema.
Con il java sono a zero!!!
Dovrò fare un bel pò di prove.

[Nounours]

Originariamente inviato da Andrea85
Ho detto: SIMILE all' "alt".

Grazie lo stesso.
Sto smanettando con il rollover, ma con scarsi risultati......

http://javascript.html.it/articoli/l...bble-tooltips/

Javascript e CSS

[Sgro]

Per fare quello che intendi, non serve alcun javascript, puoi fare tutto coi CSS.

Ammettiamo che hai la tua immagine

[img]immagine.jpg[/img]

Devi aggiungere un paio di cosette, in questo modo:

[img]immagine.jpg[/img]<span>Foto1</span>

E ora veniamo ai CSS

a>span
{
display : none;
position : relative;
}

a:hover>span
{
display : block;
background-color : yellow;
color : black;
}

In questo modo cosa succede? Normalmente lo <span> è nascosto, ma quando il mouse passa sopra l'immagine, diventa visibile. La posizione di default dello span è sotto l'immagine, ma con le opportune proprietà CSS si può posizionarlo dove si vuole.

Fatemi sapere se servono chiarimenti.

[Andrea85]

Originariamente inviato da Nounours
http://javascript.html.it/articoli/l...bble-tooltips/

Javascript e CSS

Gli articoli presenti su quella pagina sono ottimi.
Grazie.

[Andrea85]

Originariamente inviato da Sgro
Per fare quello che intendi, non serve alcun javascript, puoi fare tutto coi CSS.

Ammettiamo che hai la tua immagine

[img]immagine.jpg[/img]

Devi aggiungere un paio di cosette, in questo modo:

[img]immagine.jpg[/img]<span>Foto1</span>

E ora veniamo ai CSS

a>span
{
display : none;
position : relative;
}

a:hover>span
{
display : block;
background-color : yellow;
color : black;
}

In questo modo cosa succede? Normalmente lo <span> è nascosto, ma quando il mouse passa sopra l'immagine, diventa visibile. La posizione di default dello span è sotto l'immagine, ma con le opportune proprietà CSS si può posizionarlo dove si vuole.

Fatemi sapere se servono chiarimenti.

Poichè non ho mai approfondito i css, al momento sono un brocco.
In ogni caso, il codice che mi hai dato è incompleto.
Facendo un pò di prove, ho ricavato questo qui:


a{ position:relative; /*questa è fondamentale*/
z-index:24; background-color: #ff146a;color: #abf000;
text-decoration: none}

a:hover{ z-index: 25; background-color: #009ff0}

a span{display: none}

a:hover span{ /*lo span verrà mostrato solo sullo stato :hover */
display: block; position:absolute;
top: 10em; left: 15em; width: 15em;
border: 0px solid #0cf; background-color: #aaacff; color:#fff000;
text-align: center}



Tag immagine:

<a href="#">[img]immagine.gif[/img]
<span>Immagine di prova</span></a>

L'effetto che volevo era proprio questo.
Ora, invece di fargli visualizzare un blocco, gli costruirò una tabella.....provando...provando.

Ho due domande.
Ho notato che con il dreamweaver 8 si possono fare le stesse cose, ma non ci riesco.
Quando imposto uno stile, invece di crearmi l'effetto desiderato, mi colora il livello sul quale si trova la mia immagine.

Dato che ho il dreamweaver, tanto vale cercare di capire come funziona!
Sapresti darmi qualche consiglio ?

Un'altra cosa.
Per quanto riguarda la tua risposta....
E' possibile eseguire quello script senza ricorrere al link ?
Io ci ho provato ma senza esito positivo.