bottoni animati

[olmetta]

aiuto, ci sto diventando matta: qualsiasi cosa io legga, dicono tutti che è facile, forse ci sono cose che vengono date per scontate e non riesco proprio a capire.

allora ho due gif: una rappresenta il bottone, l'altra il bottone con il mouse sopra. ho una pagina html. cosa ci scrivo nel css perché il bottone diventi un link animano ma SENZA i contori blu tipici di link.
vi ringrazio..salvatemi

[salasir]

Molto velocemente:

css 
a.bottone { text-decoration: none; display:block; width: nnn; height: xxx; }
a.bottone { background: url (img-bottone.gif); }
a.bottone:hover { background: url (img-bottone-con-mouse.gif); }

xhtml 
...

Poi devi dare le dimensioni al link

[olmetta]

questo il codice che ho scritto

html
prova

css
a.bottone { text-decoration: none; display:block; width: 150; height: 53; }
a.bottone { background: url (button1a.gif); }
a.bottone:hover { background: url (button1b.gif); }


non fa! dove sbaglio?

[9issara]

Provi cosi

html
<p class="bottone">prova</p>

css
a.bottone { text-decoration: none; display:block; width: 150; height: 53; }
a.bottone { background-image: url (button1a.gif); }
a.bottone:hover { background-image: url (button1b.gif); }
p.bottone { visibility:hidden; }

[Mich_]

IL fatto che tu diventi matta, non e` un problema CSS; se vuoi parlane nel forum "pisicologia" sei libera, ma qui non ci azzecca (come dire attenta ai titoli: devono essere esplicativi del problema, non del tuo stato d'animo).

Occhio alla sintassi CSS: ci sono vari errori:

a.bottone {
  text-decoration: none;
  display:block;
  width: 150patate;
  height: 53cipolle;
}
a.bottone {
  background: url[nospace](button1a.gif);
}
a.bottone:hover {
  background: url[nospace] (button1b.gif); 
}

[olmetta]

comunque ho provato e non c'è verso di farlo funzionare. mi fa vedere il bottone (la prima gif) posizionandolo sotto a delle scritte ( e questo lo risolvo bene), ma di rolover neanche l'ombra.
probabilmente faccio qualche errore di base..avete qualche linka qualche articolo che mi può spiegare questo tipo di bottone? qui su html ho trovato tutti esempi che erano fatti da immagini "doppi" tipo questo per capirsi

rollover

niente di più..
intanto grazie a tutti

[olmetta]

ho appena scoperto che su firefox mi fa vedere ciò che vi ho appena descritto, su explorer invece il bottone appare e fa anche il rollover: naturalmente ci viene stampato sopra la parola "prova", ma intanto è qualcosa!!qualcuno sa risolvere l'incompatibilità?

[9issara]

ma hai fatto come ho suggerito io????

con p.bottone { visibility:hidden; } nascondi la scritta

[Mich_]

Non puoi mettere un tag

all'interno di un tag <a>.
Qualche browser puo` anche accettarlo, ma non e` corretto.

Il rollover si fa di solito solo su un link (per probelmi di compatibilta` fra browser).
Al massimo dentro un <a> ci puoi mettere uno <span>, am non credoche nel tuo caso ci vada.

Comunque ecco alcuni articoli:

Bookmark: rollover, sprites e menu
Rollover creativi

[olmetta]

grazie! ci sono riuscita!!!