Condividi:        

Semitrasparenza e menu

Discussioni e opinioni costruttive sul mondo dell'informatica.
Per la soluzione di problemi specifici fare riferimento alle sezioni di assistenza!

Moderatori: aurelio37, Anthony47, axelrox

Semitrasparenza e menu

Postdi KID.A » 25/02/03 16:15

ciao,
volevo sapere come posso creare un'immagine semitrasparente in generale ( e inparicolare come applicare la semitraspareza ad un Menu:
per un esempio di quello che intendo, gurdate il menu di questo sito: http://www.unicatt.it/

Ho letto e sentito parlare del "canale alpha", ma come posso usarlo?
Ci sono altri metodi per ottenere un'immagine che lasci intravvedere il testo o un'altra immagine che sta sotto nella pagina web?

grazie
KID.A
Utente Senior
 
Post: 662
Iscritto il: 27/05/02 17:35

Sponsor
 

Postdi pjfry » 25/02/03 16:44

le immagini gif si possono salvare con un colore 'trasparente' (completamente trasparente credo, non come vuoi te...)
hai provato a leggerti il file fw_menu.js che è incluso nella pagina che segnali? se conosci il javascript potrebbe essere un modo veloce per trovare l'ispirazione ;)
Avatar utente
pjfry
Moderatore
 
Post: 8240
Iscritto il: 19/11/02 17:52
Località: terni

Postdi KID.A » 25/02/03 16:55

ora guardo meglio...vediamo se capisco.

E in generale, x creare un'immagine semitrasparente?
KID.A
Utente Senior
 
Post: 662
Iscritto il: 27/05/02 17:35

Postdi KID.A » 25/02/03 17:11

beh, il .js è un po' complesso per me (non sono proprio un programmatore javascript...)

mi pare che il "focus" della questione semitraspareza (limitatamente al Menu) siano queste stringhe:

Codice: Seleziona tutto
else {
   content += ''+
   '<DIV ID="menuLayer'+ countMenus +'" STYLE="position:absolute;z-index:1;left:10;top:'+ (i * 100) +';visibility:hidden;filter:alpha(Opacity=80);">\n'+
   '  <DIV ID="menuLite'+ countMenus +'" STYLE="position:absolute;z-index:1;left:'+ menu.menuBorder +';top:'+ menu.menuBorder +';visibility:hide;" onMouseOut="mouseoutMenu();">\n'+
   '  <DIV ID="menuFg'+ countMenus +'" STYLE="position:absolute;left:'+ menu.menuBorder +';top:'+ menu.menuBorder +';visibility:hide;filter:alpha(Opacity=80);">\n'+
   '';

Reso il codice più visibile. Nicola
............


Che ne dici?




Mi chiedevo se i tag DIV , STYLE con il filter:alpha...
posso usarli anche al di fuori dello script , applicandoli ai codici di una pagian web.
Come dovrei fare, se ciò è possibile?

CIAO; grazie!
KID.A
Utente Senior
 
Post: 662
Iscritto il: 27/05/02 17:35

Postdi Nicola » 25/02/03 17:29

Opacity ad occhio dovrebbe dare l'opacità

Cmq se vuoi "sfumare" i colori vari e le immagini cercati uno jascript che effettui il fading (compatibile solo con IE, credo).

Ciao
Nicola
Nicola
Utente Senior
 
Post: 7381
Iscritto il: 08/02/02 01:00

Postdi KID.A » 25/02/03 20:37

no, non vorrei il fading ...ma la semitrasparenza (fissa, per così dire, non dinamica come con un script .js che sfumi gradualmente)... :undecided:

qualche idea ???
(VEDERE mio post precedente, dove c'è il Codice)

ciao
KID.A
Utente Senior
 
Post: 662
Iscritto il: 27/05/02 17:35

Postdi pjfry » 26/02/03 01:14

KID.A ha scritto:Mi chiedevo se i tag DIV , STYLE con il filter:alpha...
posso usarli anche al di fuori dello script , applicandoli ai codici di una pagina web.

boh... cioè DIV non sò cosa sia, l'altro forse, comunque il punto è che mi pare che questo filter alpha sia una cosa ( che terminologia, eh?) standard di javascript quindi cercalo in una guida (se ne hai una sottomano)
io so che il canale alpha è quello della trasparenza che con i gif è totale, però ho saputo che in generale è possibile modificare il grado di trasparenza (opacity=80, direi ;) )
Avatar utente
pjfry
Moderatore
 
Post: 8240
Iscritto il: 19/11/02 17:52
Località: terni

Postdi KID.A » 26/02/03 01:27

il tag DIV dovrebbe essere (per IE) quello che è LAYER per Netscape...

i filtri li ho visti anche su qualche pagina web, tra i codici, ma nn ricordo dove (ti segnalerei il link...)
quindi anche HTML oltre che Javascript....

Sulla trasprenza delle Gif, sì o è totale oppure non lo è...è per questo che cercavo "rifugio" in questi tags DIV, Filter...ma non so come utilizzarli correttamente???
KID.A
Utente Senior
 
Post: 662
Iscritto il: 27/05/02 17:35

Postdi pjfry » 26/02/03 01:29

ma se ti possono andare bene anche delle immagini hai mai provato con le tiff? dovrebbero essere + avanzate delle gif, ora provo :D
Avatar utente
pjfry
Moderatore
 
Post: 8240
Iscritto il: 19/11/02 17:52
Località: terni

Postdi KID.A » 26/02/03 01:46

ma posso renderle semi-trasperenti ?
KID.A
Utente Senior
 
Post: 662
Iscritto il: 27/05/02 17:35

Postdi pjfry » 26/02/03 01:57

a quanto pare si, anche se con 2 click non ci sono riuscito :P
prova a leggere qui http://www.rdpslides.com/pptfaq/FAQ00190.htm
Avatar utente
pjfry
Moderatore
 
Post: 8240
Iscritto il: 19/11/02 17:52
Località: terni

Postdi piercing » 26/02/03 20:27

basta studiare un pò i CSS...

comunque guardati l'HTML di questa paginetta appena creata... se può esserti d'aiuto...

i filtri grafici (applicabili solo su IE) sono tantissimi... questo è tra i più semplici...

Grazie ai prestatori di immagine :-)
Avatar utente
piercing
Moderatore
 
Post: 7569
Iscritto il: 10/04/02 10:34
Località: Roma

Postdi pjfry » 26/02/03 20:40

ah, era così facile? :aaah
:D cmq secondo me con fry al posto del namecciano sarebbe venuta meglio :lol:
Avatar utente
pjfry
Moderatore
 
Post: 8240
Iscritto il: 19/11/02 17:52
Località: terni

Postdi piercing » 26/02/03 20:50

pj... ti confesso che l'idea iniziale era di farlo con te... ma non so come alla fine ho preso niko :-)))

pjfry ha scritto:ah, era così facile?

maledetto vizio di microsoft e macromedia è quello di complicare le cose banali!
Avatar utente
piercing
Moderatore
 
Post: 7569
Iscritto il: 10/04/02 10:34
Località: Roma

Postdi matrix87 » 26/02/03 23:26

allora, le immagini gif hanno solo una trasparenza totale, "o sei 0 o sei 1" :P invece quello che fa per te è il formato .png. permette una trasparenza parziale, semplicemente salvando il file in quel formato (se è necessario devi dire al programma di mantenere la trasparenza) e inserirla nella pagina web. invece se devi fare un'immagine semplicemente sfumata usi i css.

esempio:
Codice: Seleziona tutto
1) <img src="..." style="filter: alpha(opacity: 80)" />
2) <img src="..." style="filter: alpha(opacity: 80, finishopacity: 40, style: 1)" />
3) <img src="..." style="filter: alpha(opacity: 80, finishopacity: 40, style: 2)" />
4) <img src="..." style="filter: alpha(opacity: 80, finishopacity: 40, style: 3)" />


[OT]
sicuramente avrete notato il /> alla fine, essendo codice xhtml secondo i nuovi standard :P
[/OT]

il primo fa una sfumatura uniforme dell'80%, il secondo una sfumatura lineare (da sinistra a destra) partendo da 80% per arrivare a 40%, la terza fa una sfumatura conica partendo dal centro con 80% per arrivare all'estremo con 40%, mentre la quarta fa una sfumatura a rettangoli concentrici sempre dal centro con 80 all'estremo con 40. css e tabelle li puoi usare insieme per fare descrizioni su mouseover o menu contestuali (vedi entrambi su http://www.matrix87.com, i collegamenti hanno le descrizioni e fai clic col tasto destro per il menu). si possono applicare al testo (a patto che la parte di testo sia compreso in un tag che supporta l'attributo width, necessario per la trasparenza) oppure in div, table, tr, td, img, a, ecc. per ulteriori info http://www.w3schools.com/dhtml/dhtml_css.asp , ci sono molti altri filter.

[puristi]
in realtà non è css, ma dhtml css :P
[/puristi]
[smanettoni]
provatelo, è perfetto per fare gli "sboroni" col sito :D
[/smanettoni]
[nicola]
rendi anke il mio codice + visibile visto che a quest'ora sono un po contorto :P
[/nicola]
the matrix is the world that has been pulled over your eyes to blind you from the truth

special thanks to: notepad, keyboard & mouse
matrix87
Utente Junior
 
Post: 40
Iscritto il: 28/01/03 19:08
Località: milano

Postdi piercing » 27/02/03 00:40

matrix.... cosa vuoi dire con il fatto che le gif hanno solo 0 e 1? io ho usato le gif per fare l'esempio, dove la trasparenza è applicata e funzionante...
Avatar utente
piercing
Moderatore
 
Post: 7569
Iscritto il: 10/04/02 10:34
Località: Roma

Postdi pjfry » 27/02/03 00:51

il formato gif ha la trasparenza 0 o 1 di cui parla matrix
poi come le usa il browser è un'altra cosa
Avatar utente
pjfry
Moderatore
 
Post: 8240
Iscritto il: 19/11/02 17:52
Località: terni

Postdi piercing » 27/02/03 01:03

???

beh... il fatto che il browser sia explorer non è così irrilevante... :-))
Avatar utente
piercing
Moderatore
 
Post: 7569
Iscritto il: 10/04/02 10:34
Località: Roma

Postdi pjfry » 27/02/03 01:08

appunto... credo che farebbe lo stesso con una 2 bitmap o jpeg,no?
invece se prendi una gif e dei suoi 256 colori ne setti uno trasparente quello sarà visto come trasparente ( al 100%) da qualunque visualizzatore che supporti il gif
Avatar utente
pjfry
Moderatore
 
Post: 8240
Iscritto il: 19/11/02 17:52
Località: terni

Postdi KID.A » 27/02/03 01:18

ottimi suggerimenti

x piercing:
ok, perfetto...ma il mio intento era mettere l'immagine semitrasp. sopra il testo(+eventuali altre img della pagina web)


x matix:
ottimi il tuo menu
e anche il link
Me li studio bene....

(io avevo trovato nel frattempo pure questo:
http://msdn.microsoft.com/workshop/samp ... Tidemo.htm)

grazie!
KID.A
Utente Senior
 
Post: 662
Iscritto il: 27/05/02 17:35

Prossimo

Torna a Discussioni


Topic correlati a "Semitrasparenza e menu":


Chi c’è in linea

Visitano il forum: Nessuno e 19 ospiti