Visualizzazione dei risultati da 1 a 5 su 5
  1. #1

    Opacizzare due immagini facendo "hover" solo su una delle due

    Ciao a tutti,

    vorrei che passando con il mouse su un'immagine si opacizzi, ma allo stesso tempo si opacizzi anche uno dei pulsanti della barra di navigazione.

    In pratica, esiste un modo per opacizzare un'immagine facendo "hover" su un'altra immagine?

    Non so se sono stata chiara...

    Grazie.

  2. #2
    L'unico modo che mi viene in mente è quello di mettere sia l'immagine che il pulsante nello stesso div, e definire in CSS l'opacità al div stesso. Se non sbaglio però è sconsigliato applicare :hover a elementi che non siano un link (a).

  3. #3
    Utente bannato
    Registrato dal
    Apr 2009
    Messaggi
    530
    È sconsigliato in quanto innovazione (l' :hover per tutti gli Elementi) di CSS supportata solo da alcuni e più recenti Browser.
    Ed inoltre, diventa improbabile che la "Kjka" possa poter racchiudere entrambe in un DIV o TABLE senza inglobare altra roba (dovrebbero le immagini, trovarsi proprio una sopra l' altra).

    Si può fare benissimo col JavaScript, contando che anche Browser di dieci anni fa lo interpretano.
    Ti ho buttato giù un modellino piccino-picciò, ma eloquente:
    codice:
    <head>
    <script>
    
     function half(){
      document.images["master"].style.opacity = 0.4;
      document.images["navbtn"].style.opacity = 0.4;
      
      document.images["master"].style.filter="alpha(opacity=40)";
      document.images["navbtn"].style.filter="alpha(opacity=40)";
     }
    
     function full(){
      document.images["master"].style.opacity = 1;
      document.images["navbtn"].style.opacity = 1;
      
      document.images["master"].style.filter="alpha(opacity=100)";
      document.images["navbtn"].style.filter="alpha(opacity=100)";
     }
    
    </script>
    </head>
    <body>
    
    <div align="center">
     [img][/img]
    </div>
    <div align="left">
     [img][/img]
    </div>
    
    </body>
    Le sacre scritture per gestire l' opacità non sono standardizzatissime tra i Navigatori: sia in CSS che in JavaScript dobbiamo attenerci a diverse sintassi (= chiamano le cose in diverso modo).
    Pe questo, la replica della seconda coppia di righe, con filter="alpha(opacity=valore)"; si rende necessaria per averlo funzionante con InternetExplorer.

  4. #4
    Di JS non ne so nulla, e sicuramente risulta tutto più efficace e semplice. Io, da ignorantone, utilizzando HTML e CSS, quando voglio questo effetto utilizzo un div su uno z-index a parte. In questo modo opacizzo gli elementi interni al div senza influenzare il resto. Sono cmq convinto che la soluzione JS sia decisamente meglio.

  5. #5
    Grazie mille a tutti dei preziosi consigli!

    Per il momento ho deciso di rinunciare all'idea e ho eliminato i pulsanti. Con calma, più avanti proverò a seguire le vostre istruzioni.

    Grazie ancora!

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 © 2026 vBulletin Solutions, Inc. All rights reserved.