Gif che cambia al passaggio del link....

**fasa** · 25-08-2008, 20:00

Ciao ragazzi... spero di farmi capire...

in pratica mi serve quel codice che mi permette di passare sopra con il mouse e mi fa cambiare l'immagine gif di un link

in sostanza x e y corrispondono ad un'immagine:

X link bianco

poi cliccandoci sopra o passandoci soltanto diventa:

Y link rosso

**fcaldera** · 25-08-2008, 20:20

a {
color: white;
background: url(x.gif);
}

a:hover {
color: red;
background: url(y.gif);
}

**fasa** · 25-08-2008, 21:09

Ciao....

scusami... ok questo codice...

ma poi un ipotetico link come diventerebbe?

tipo

prova

**Raccoon29** · 25-08-2008, 23:50

Ciao,

il link HTML rimane il medesimo.
Il giochetto è limitato al CSS.
Esempio:
HTML

codice:

<div class="tagghetto">
   HTML.it
</div>

CSS

codice:

.tagghetto a{ /*normale colore del link nel blocco "tagghetto" */
   color: red;
}

.tagghetto a:hover{ /*colore del link nel blocco "tagghetto" quando il mouse gli passa sopra */
   color: yellow;
}

hth
ciauz

**fasa** · 26-08-2008, 00:48

Raccoon29

ora funzionerebbe... ma esce fuori praticamente solo l'immagine .gif (fra l'altro ripetuta più volte) di sfondo senza le parole... o meglio le parole escono sotto l'immagine !!!

in pratica io devo avere :

IMMAGINE 1 - LINK BIANCO

poi una volta che ci vado sopra con il mouse

IMMAGINE 2 - LINK ROSSO

**Raccoon29** · 26-08-2008, 01:15

Allora proviamo a fare così, prova questo codice che ti dò e dimmi se rispecchia ciò che intendi ottenere:

HTML

codice:

<html>
  <head>
    <title>Laboratorio</title>
    <link href="index.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div id="container">
      HTML.it
    </div>
  </body>
</html>

e il CSS (index.css nella stessa cartella)

codice:

body{
	background-color: black;
}

#container{
	width: 60px; /*dimesioni da adattare */
	height: 20px;
}

#container a{
	display: block;
	width: 60px; /*dimensioni da adattare uguali a sopra */
	height: 20px;
	background-image: url(bianco.gif); /*url dello sfondo per il bianco */
	background-repeat: no-repeat;
	color: white;
}

#container a:hover{
	background-image: url(rosso.gif); /* url dello sfondo per il rosso */
	color: red;
}

chiaramente questo è un esempio, poi lo adatti in base a come ti serve.
Tieni a mente che l'immagine si ripete perché di default viene ripetuta.
Inoltre ricorda che le dimensioni del link devono essere adattate alle dimensioni dello sfondo che hai a disposizione, oppure viceversa, ma comunque una delle due, o l'effetto non rende.
Facci sapere se ti va bene.

hth
ciauz

**fasa** · 26-08-2008, 01:34

GRAZIE Raccoon29 ora funzione correttamente!!...

Penso interessi a molti questa procedura

Grazie.!

**Iroschi** · 10-09-2008, 01:33

Ciao Raccoon29

la cosa è interessante. Io avevo fatto una richiesta simile ma diversa a questo post http://forum.html.it/forum/showthrea...readid=1268491 . Come vedi inizialmente cercavo una soluzione di un tipo che poi è cambiata. Ora vorrei senza ripetermi trovare la soluzione di creare un immagine ( penso gif) che quando la clicchi cambi e ne esca un altra per un tot di tempo. La stessa immagine però è caricata su un codice per creare un collegamento ad un sito.
Grazie per una risposta.

**fcaldera** · 10-09-2008, 09:20

Originariamente inviato da Iroschi
...che quando la clicchi cambi...

il che esclude in pratica l'uso di soli CSS

Continua la discussione di là

Discussione: Gif che cambia al passaggio del link....

Strumenti discussione

Ricerca discussione

Visualizza

Gif che cambia al passaggio del link....

Magia del CSS

Risolvere richiederebbe più tempo...

Permessi di invio