Visualizzazione dei risultati da 1 a 7 su 7
  1. #1
    Utente di HTML.it L'avatar di james
    Registrato dal
    Jun 2002
    Messaggi
    1,481

    gif o png per le trasparenze?

    Vorrei usare delle immagini dentro dei tag <a>, e vorrei che normalmente siano sbiadite, e all'hover non lo siano. Di solito per fare questo, creavo un duplicato dell'immagine sbiadita e lo associavo al background di <a>, poi ad a:hover assegnavo come background l'immagine normale.

    Anzichè usare il doppio delle immagini e doverle lavorare una ad una, so che c'è l'opzione transparent mi sembra, ma non funziona con alcuni browser, pensavo invece di sovrapporre una png o gif semitrasparente, è fattibile? Solo che ho sentito che le png non sono supportate da ie, sbaglio? Potete farmi un po' di luce al riguardo?

    Alla peggio prendo la vecchia strada, ma se si può fare di meglio...ben venga!

  2. #2
    Frontend samurai L'avatar di fcaldera
    Registrato dal
    Feb 2003
    Messaggi
    12,924
    se dentro il link hai solo un immagine allora potresti usare l'opacity in modo da creare l'effetto sbiadito

    a img {
    opacity: 0.5;
    -moz-opacity: 0.5;
    filter: alpha(opacity=50);
    }
    a:hover img {
    opacity: 1;
    -moz-opacity: 1;
    filter: alpha(opacity=100);
    }

    se invece hai anche del testo del testo ti conviene usare la soluzione che giù usi: aggiungere una png trasparente sovrapposta che sparisce allo stato hover mi sembra una complicazione

    Se il tuo problema era quello di ridurre il numero di immagini, anzichè farne due per ciascun link, ne fai una sola che abbia entrambi gli stati (acceso e spento) e poi utilizzi opportunamente la proprietà background-position per visualizzare la sezione di immagine che ti serve
    Vuoi aiutare la riforestazione responsabile?

    Iscriviti a Ecologi e inizia a rimuovere la tua impronta ecologica (30 alberi extra usando il referral)

  3. #3
    Utente di HTML.it L'avatar di james
    Registrato dal
    Jun 2002
    Messaggi
    1,481
    Originariamente inviato da fcaldera
    se dentro il link hai solo un immagine allora potresti usare l'opacity in modo da creare l'effetto sbiadito

    a img {
    opacity: 0.5;
    -moz-opacity: 0.5;
    filter: alpha(opacity=50);
    }
    a:hover img {
    opacity: 1;
    -moz-opacity: 1;
    filter: alpha(opacity=100);
    }

    se invece hai anche del testo del testo ti conviene usare la soluzione che giù usi: aggiungere una png trasparente sovrapposta che sparisce allo stato hover mi sembra una complicazione

    Se il tuo problema era quello di ridurre il numero di immagini, anzichè farne due per ciascun link, ne fai una sola che abbia entrambi gli stati (acceso e spento) e poi utilizzi opportunamente la proprietà background-position per visualizzare la sezione di immagine che ti serve
    grazie delle dritte. il problema non è il numero di immagini, ma semplificare il lavoro di duplicazione delle stesse, o eliminare la creazione di immigini uniche da spostare. Non ho del testo dentro l'immagine quindi posso fare ciò che voglio, ma opacity è ben supportata su tutti i browser??

  4. #4
    Utente di HTML.it L'avatar di james
    Registrato dal
    Jun 2002
    Messaggi
    1,481
    il sistema opacity andrebbe benissimo, l'ho appena provato su IE e FF, ma Opera ad esempio non lo vede

  5. #5
    Utente di HTML.it L'avatar di james
    Registrato dal
    Jun 2002
    Messaggi
    1,481
    konqueror idem, non lo vede, cioè, non gestisce l'opacità, l'immagine si vede

  6. #6
    Frontend samurai L'avatar di fcaldera
    Registrato dal
    Feb 2003
    Messaggi
    12,924
    Originariamente inviato da james
    il sistema opacity andrebbe benissimo, l'ho appena provato su IE e FF, ma Opera ad esempio non lo vede
    Su Opera funziona (io l'ho utilizzato) a meno che tu non stia usando una versione del browser non recente.

    Konqueror effettivamente non implementa la proprietà (http://www.konqueror.org/css/)
    Vuoi aiutare la riforestazione responsabile?

    Iscriviti a Ecologi e inizia a rimuovere la tua impronta ecologica (30 alberi extra usando il referral)

  7. #7
    Frontend samurai L'avatar di fcaldera
    Registrato dal
    Feb 2003
    Messaggi
    12,924
    Leggi anche questa discussione http://forum.diodati.org/messaggi.asp?f=2&t=8162

    qualcuno suggerisce anche l'uso della proprietà -KHTML-opacity... prova ad aggiungerlo
    Vuoi aiutare la riforestazione responsabile?

    Iscriviti a Ecologi e inizia a rimuovere la tua impronta ecologica (30 alberi extra usando il referral)

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.