Cambio Immagine

**thisismax90** · 03-05-2011, 16:33

Ciao!
vedendo un sito e cioè questo: http://www.lucadorigo.com/
ho visto che in basso a destra ci sono le icone di facebook twitter ecc
e che quando clicchi sopra prendono colore.

se vado a vedere l'immagine di facebook per esempio è questa: http://www.lucadorigo.com/images/facebook.png

come ha fatto?
vorrei fare una cosa uguale sul mio sito..
come si fa?

**Simo990** · 03-05-2011, 16:45

È molto semplice, in pratica c'è un tag a cui viene dato come background l'immagine di facebook nelle 2 versioni (bianco e nero e a colori).
Nell'evento :hover viene data la proprietà background-position: bottom; che non fa altro che spostare il background nella parte a colori, per dare l'impressione che il pulsante si sia colorato.

**thisismax90** · 03-05-2011, 16:58

mi puoi fare un esempio di codice cosi posso capire meglio?

**Simo990** · 03-05-2011, 21:04

Vediamo... con puoi scrivere

codice:

#facebook { background-image:url('facebook.png') }
#facebook:hover { background-position: bottom }

**thisismax90** · 04-05-2011, 09:25

Non mi funziona

ho provato a fare una prova con una pagina vuota html ma non mi visualizza nessun immagine..

ho provato a inserire nello span qualche lettera a caso e me la visualizza ma non tutta..è un po tagliata (anche se sembra funzionare)..

come mai devo scrivere qualcosa nello span per farla uscire??

come posso risolvere per fare una cosa simile a quella che ho indicato e far visualizzare l'immagine giusta come nell'esempio?

p.s. inoltre con ie non funziona...

**Simo990** · 04-05-2011, 11:14

Devi dare una dimensione fissa allo , altrimenti è naturale che lo sfondo non si vede.

Quindi tornando all'esempio del sito basta impostare

codice:

#facebook {
display:block;
width:24px;
height:24px;
background-image:url('facebook.png') }
#facebook:hover { background-position: bottom }

devi anche impostare la proprietà display:block; poiché è un tag inline di default ed è necessario che sia un elemento di blocco per visualizzare l'immagine di sfondo.

Ciao!

**thisismax90** · 04-05-2011, 12:02

funziona

comunque perchè non va con ie?

**thisismax90** · 04-05-2011, 22:06

UPP

**Simo990** · 05-05-2011, 11:05

Non funziona su IE perché la pseudoclasse :hover non è supportata su ogni elemento, ma solo sul tag <a>. Ma c'è un trucco: puoi aprire un tag <a> fuori dal tag e dare a lui la proprietà

codice:

a:hover { background-position:bottom }

o più semplicemente sostituire con <a>, mantenendo il display:block perché anche <a> è un tag inline.
Così dovrebbe andare su tutti i browser fino a IE7 (IE6 non l'ho provato).

Ciao

**thisismax90** · 05-05-2011, 11:15

Io ho una cosa del genere:

codice:

<html>
<style type="text/css">
#facebook {
display:block;
width:24px;
height:24px;
display:inline-block; 
background-image:url('images/facebook.png'); }
#facebook:hover { background-position: bottom}
</style>
<div id="dfacebook"><span id="facebook"></span></div>

come faccio a modificarla?
sto diventando matto

Discussione: Cambio Immagine

Strumenti discussione

Ricerca discussione

Visualizza

Cambio Immagine

Permessi di invio