Bottoni Rollover (per gente inesperta)

[Cadmir]

Salve ancora. Vi volevo semplicemente chiedere come soi fa un bottone rollover. Avendo ad esempio questi dati:

Immagine 1 : image1.jpg
Immagine 2 : image2.jpg

Ed un link di questo genere:

<a href="www.html.it">
[img]image1.jpg[/img]
</a>

Come posso fare in modo che quando vado sopra al pulsante mi si mette l' Immagine 2 mentre quando non sto sopra al pulsante Immagine 1 ?
Ho visto molti esempi come per esempio quello di Dreamweaver MX, ma sono molto contorti per uno che non sa nulla sui rollover.

Spero di essere stato chiaro e quindi di avervi semplificato il lavoro. Grazie aspetto vostre risposte



PS: Avevo intenzione di fare i pulsanti simili a questo sito:
http://www.newgen-gamers.com/index.php
Come potete vedere se ci andate sopra il colore si accende piano piano e si psegne nel medesimo modo. Ora si potrebbero usare le gif, e per farle io uso photoshop cs. Ci sarebbe un modo per dirgli di fargli fare un solo ciclo? Grazie ancora

[pierofix]

Ma non ti avevo detto di cercare "image replacement" prima di postare nuovamente?

[Cadmir]

Pierofix hai ragione ma pensi che io non l'ho fatto scusa?
Forse tu non hai capito che a me, si serve il codice, ma serve di più imparare come svilupparlo. Ho cercato image replacement ma trovo codici lunghi e complessi. E io dei codici lunghi e complessi sinceramente non ne capisco nulla. Vorrei imparare, non sfruttarvi

Tutto qui

[pierofix]

E io appunto per farti imparare ti ho rimandato alla ricerca. Vabbè, ripetiamolo nuovamente.

Tu hai questa porzione di markup:

Blog

Essendo un link testuale rendi il documento più accessibile in quanto le tecnologie assistive per persone non vedenti - come screen-reader o barre Braille - sono in grado di gestire meglio le informazioni testuali.

Ora dobbiamo rimpiazzare visivamente quel testo con un'immagine. Facciamo finta di averne due già pronte, di dimensione 200×100 px, una per lo stato normale e una per l'effetto "quando ci passo sopra con il mouse": le chiamiamo rispettivamente blog.gif e blog_hover.gif.

Procediamo con il CSS:

a {
   text-decoration:none;
   display:block;
   width:200px; height:100px;
   text-indent:-1000em;
   background:#fff url(blog.gif) no-repeat 0 0;
}
a:hover { background-image:url(blog_hover.gif) }

E il gioco è fatto.

[Cadmir]

Ora ci provo e ti dico quali sono i miei intoppi, se ce ne saranno.
Ti ringrazio immensamente Pierofix!

[Cadmir]

mi si evidenzia come backgropund VVoVe: (giustamente l'abbiamo impostata come background)

Ora io poichè ho due immagini chiamate base.jpg (per quando il mouse NON gli sta sopra) e rollover.jpg (per quando il mouse gli sta sopra) messe dentro la cartella images. Queste sono entrambi di 100px * 100px.

Ora io ho impostato così un pezzo:

widht:100px;
height:100px;

Ora la larghgezza va bene ma ha un eccesso in altezza di circa 3-4px a vista d'occhio. Se si può, si potrebbe impostare il pulsante, invece di BACKGROUND, come immagine normale?

[pierofix]

Originariamente inviato da Cadmir
Se si può, si potrebbe impostare il pulsante, invece di BACKGROUND, come immagine normale?

Giro giro tondo... A questo punto devi avvalerti di javascript.

Io, tuttavia, prima ti avevo sconsigliato questa tecnica perchè è di una di quelle che appartengono al passato. Rischi insomma di sporcare troppo e senza motivo il markup, oltre a dover prendere ulteriori precauzioni in termini di accessibilità ai contenuti.

Per darti un'idea delle difficoltà che delle persone disabii possono affrontare durante la navigazione web, prova a dare un'occhiata a questo video:

- http://forum.html.it/forum/showthrea...hreadid=887429

Ti accorgerai che più sono semplici e ponderate le cose, meglio è PER TUTTI.

[Cadmir]

Bhè per quanto riguarda i disabili so come si comportano davanti al computer, ne avevo uno in classe alle medie: era cieca.
Comunque sia ho capito ma il sito richiede anche una sua struttura grafica, e anche una bellezza estetica, nonchè una agevolazione nella sua navigazione.
Tuttavia non ho ancora capito bene. C'è il modo per far diventare il bottone perfetto? Sembra come se abbiamo abilitato l'opzione del wallpaper ad AFFIANCATO, mi capisci?
Speriamo che si può fare in CSS...

[pierofix]

Tenuto conto che la tua immagine è 100×100 px:

a {
   margin:0; padding:0;
   text-decoration:none;
   display:block;
   width:100px; height:100px;
   text-indent:-1000em;
   background:#fff url(blog.gif) no-repeat 0 0;
}
a:hover { background-image:url(blog_hover.gif) }

Se ti avanza ancora spazio forse significa che le tue immagini non sono proprio 100×100 px.

[Cadmir]

Grazie mille viene tutto maledettamente perfetto. Non so come ringraziarmi per avermi insegnato ciò e per aver usato un po del tuo tempo per fare tutto questo. Grazie mille ancora. Oggi ho imparato molto