Posso modificare l'aspetto di un'immagine html durante il passaggio del mouse senza una seconda immagine?
Domanda
C'è un modo per cambiare l'aspetto di un'icona (es.contrasto/luminosità) quando passo il cursore, senza richiedere un secondo file immagine (o senza richiedere una parte nascosta dell'immagine)?
Soluzione
Ecco alcune buone informazioni sull'opacità e la trasparenza delle immagini con i CSS.
Quindi, per creare un'immagine con un'opacità del 50%, dovresti fare questo:
<img src="image.png" style="opacity: 0.5; filter: alpha(opacity=50)" />
IL opacità: parte è il modo in cui lo fa Firefox ed è un valore compreso tra 0,0 e 1,0. filtro: è così che fa IE ed è un valore compreso tra 0 e 100.
Altri suggerimenti
Non usi un tag img, ma un elemento con un attributo css background-image e imposti la background-position al passaggio del mouse.IE richiede un tag "a" come elemento principale per il selettore :hover.Si chiamano sprite CSS.
Un ottimo articolo che spiega come utilizzare gli sprite CSS.
Ecco del codice con cui giocare.Idea base:inserisci tutti i possibili stati dell'immagine in un'unica grande immagine, imposta una "dimensione della finestra", che sia più piccola dell'immagine;spostare la finestra utilizzando background-position
.
#test {
display: block;
width: 250px; /* window */
height: 337px; /* size */
background: url(http://vi.sualize.us/thumbs/08/09/01/fashion,indie,inspiration,portrait-f825c152cc04c3dbbb6a38174a32a00f_h.jpg) no-repeat; /* put the image */
border: 1px solid red; /* for debugging */
text-indent: -1000px; /* hide the text */
}
#test:hover {
background-position: -250px 0; /* on mouse over move the window to a different part of the image */
}
<a href="#" id="test">a button</a>
Il modo in cui di solito vedo le cose fatte con immagini più piccole come i pulsanti, fa sì che venga mostrata solo una certa parte dell'immagine.Quindi molti stati dell'immagine comporranno un'immagine più grande che verrà spostata dietro la porta visibile.Lo eliminerò quando qualcuno avrà il codice.