consiglio tecnico

[vgraph]

sto cercando di muovere qualche passo con l'HTML e i CSS

volevo sapere se qualcuno può consigliarmi la via migliore per realizzare, all'interno di un sito, un piccolo menu che nasconde delle descrizioni di qualche riga di testo, in modo che al passaggio del mouse si apra un boxettino con dentro il testo descrittivo, una specie di menu a tendina insomma, è possibile farlo solo con i CSS? (filter:alpha(opacity=0) che però non è supportato da molti Browser)

o devo per forza ricorrere a Javascript??

Qual'è la via migliore??

:huh:

[supermac]

sto cercando di muovere qualche passo con l'HTML e i CSS

volevo sapere se qualcuno può consigliarmi la via migliore per realizzare, all'interno di un sito, un piccolo menu che nasconde delle descrizioni di qualche riga di testo, in modo che al passaggio del mouse si apra un boxettino con dentro il testo descrittivo, una specie di menu a tendina insomma, è possibile farlo solo con i CSS? (filter:alpha(opacity=0) che però non è supportato da molti Browser)

o devo per forza ricorrere a Javascript??

Qual'è la via migliore??

[/b]

chiedo scusa ma non riesco proprio a capire cosa intendi. un menu con un sottomenù a discesa? o intendi solo l'effetto del link? o lo sfondo del menu che cambia?

potresti postare un link ad un sito che abbia lo stesso effetto che intendi? cosi vediamo :huh:

[vgraph]

chiedo scusa ma non riesco proprio a capire cosa intendi. un menu con un sottomenù a discesa? o intendi solo l'effetto del link? o lo sfondo del menu che cambia?

potresti postare un link ad un sito che abbia lo stesso effetto che intendi? cosi vediamo :huh:

[/b]

www.cifap.it

Mi rendo conto che non è proprio uno standard web quello di avere questi box che si accendono al rollover, ma purtroppo c'è una descrizione che "deve" essere inserita, se però hai una soluzione migliore da indicarmi...

[grigio60]

è possibile farlo solo con i CSS? (filter:alpha(opacity=0) che però non è supportato da molti Browser)

o devo per forza ricorrere a Javascript? [/b]

alpha non è supportato quasi da nessuno.

per ottenere l'effetto che dici tu la strada più semplice rimane ancora ricorrere a javascript, o utilizzando un codice simile a quello della pagina a cui fai riferimento o definendo dei contenitori "div" per i tooltip, ognuno con un proprio id e poi giocando tramite javascript sulla modifica della relativa proprietà CSS "visibility" (da 'hidden' a 'visible' e viceversa).

c'è poi un metodo semplicissimo, che non richiede né CSS né Javascript e che funziona se il tooltip è relativamente corto: usare l'attributo "title" all'interno del tag <a href>, l'effetto è quello dei suggerimenti di Windows XP e viene supportato da tutti i browser.

Esempio:

Link.esterno

passando col mouse sopra il link compare il suggerimento "Da qua finisci al sito link.esterno.com che tratta di xyz"

[vgraph]

alpha non è supportato quasi da nessuno.

per ottenere l'effetto che dici tu la strada più semplice rimane ancora ricorrere a javascript, o utilizzando un codice simile a quello della pagina a cui fai riferimento o definendo dei contenitori "div" per i tooltip, ognuno con un proprio id e poi giocando tramite javascript sulla modifica della relativa proprietà CSS "visibility" (da 'hidden' a 'visible' e viceversa).

c'è poi un metodo semplicissimo, che non richiede né CSS né Javascript e che funziona se il tooltip è relativamente corto: usare l'attributo "title" all'interno del tag <a href>, l'effetto è quello dei suggerimenti di Windows XP e viene supportato da tutti i browser.

Esempio:

Link.esterno

passando col mouse sopra il link compare il suggerimento "Da qua finisci al sito link.esterno.com che tratta di xyz"

[/b]

Si ma quello che non mi è chiaro è come faccio a mettere insieme le caratteristiche del div con href...

mi puoi fare un esempio preciso??

[grigio60]

Si ma quello che non mi è chiaro è come faccio a mettere insieme le caratteristiche del div con href...

mi puoi fare un esempio preciso?? [/b]

anche qui serve Javascript

nell'a href devi aggiungere eventi del tipo onmouseover e onmouseout associati alla funzione javascript che va a toccare le caratteristiche dell'oggetto div associato, identificato tramite il suo id

es.

div che contiene la descrizione:

<div id="desc1">Descrizione del link uno</div>

nelle style-sheet devi impostare una direttiva del tipo

#desc1 {

visibility: hidden;

}

(di default la div non si vede) più magari le impostazioni per il posizionamento a schermo

link collegato alla div:

Link 1

Tuttavia considera che per testi relativamente brevi la soluzione più semplice, rapida e sicura rimane l'uso di "title" all'interno del tag <a href>, che non richiede javascript o altre complicazioni.

[vgraph]

La tua descrizione è perfetta e fa al caso mio!

Ho provato ad inserirla ma non funziona lo stesso, provo a postarti il codice:

ok, negli style-Sheetho c'è questo:

DIV#box1 {

background-color: #6699CC;

border:1px solid #003399;

color: #ffffff;

font-size:9px;

text-align:left;

padding:5px;

line-height:12px;

position:absolute;

top:144px;

width:105px;

left: 150px;

z-index: 1;

visibility: hidden;

Mentre nell'html:

<div id="toolbar">I corsi </div>

><div id="box1">

I Corsi

Il Consorzio progetta organizza e gestisce attività formative e di orientamento diversificate per tipologie di obiettivi e di destinatari.

Il Consorzio si impegna a raccogliere e ad esaminare le richieste formative eventualmente espresse presso le sue sedi.

Le iscrizioni ai corsi si chiudono quando è raggiunto il numero dei posti disponibili.</p>

</div>

Manca forse la definizione di "mostra" e "nascondi"???

[grigio60]

Manca forse la definizione di "mostra" e "nascondi"??? [/b]

eccerto che sì

devi anche scrivere il codice javascript per mostra() e nascondi() (nomi che ho usato giusto a titolo di esempio) visto che non sono funzioni built-in

[vgraph]

Mai dare per scontato,

io vengo dall'editoria... sai pantoni, retini, macchine offset...

Col web ci perdo la testa!!

con Javascript poi...

[grigio60]

ti do una dritta di javascript allora, il codice per cambiare le proprietà di stile di un elemento con id="pippo" è

document["pippo"].style.visibility = 'hidden'; // nasconde

document["pippo"].style.visibility = 'visible'; // mostra

[vgraph]

Grazie per le tue indicazioni Grigio60 ho risolto! più facile di quanto pensassi !! :huh: :P