Rollover

[ecaon82]

Ciao a tutti e grazie intanto per gli aiuti che mi darete :-)
Volevo mettere nella mia pagina web delle immagini linkabili con rollover ma purtroppo se apro la pagina con firefox compaiono immagini doppie come nella figura allegata. ecco il codice che ho messo nella pagina web:

<div id="img_kid"> <a href="kid_art.html"/></div>

<div id="img_sceno"> <a href="scenografia_e_regia.html"/></div>

<div id="img_scrittura"><a href="scrittura.html"/></div>

<div id="img_acrilico"><a href="acrilico.html"/></div>

<div id="img_digital"><a href="digital_art.html"/></div>

<div id="img_olio"><a href="olio.html"/></div>

<div id="img_acquerello"><a href="acquerello.html"/></div>

<div id="img_disegno"><a href="disegno.html"/></div>

ecco invece il codice css per img_disegno (il codice per tutti gli altri è praticamente identico):

#img_acquerello a:link{

width: 95px;
height: 200px;
float: right;
padding-right: 2.5px;
padding-left: 2.5px;
text-decoration:none;
display:block;
background:#fff url(../immagini/corsi/acquerello.jpg) no-repeat 0 0;
}

#img_acquerello a:hover{

width: 95px;
height: 200px;
float: right;
padding-right: 2.5px;
padding-left: 2.5px;
text-decoration:none;
display:block;
background-image:url(../immagini/corsi/acquerello_roll.jpg);
}

Secondo voi cos'è che non va?

Vi ringrazio davvero tanto e se potete darmi un'aiuto in proposito ben venga, io ci ho dedicato molte ore ma niente. a presto :-)

[miki003]

Il tuo errore è aver messo le immagini come background, essendo più piccole del contenitore si ripetono.

• O usi

  background-repeat:no-repeat

• Opure metti le immagini non come background

Puoi anche linkare le immagini direttamente senza inserirle in una pagina

[Mich_]

Ci sono errori semantici e logici nell'HTML. Con quella marcatura e` molto difficile (forse impossibile) sistemare i CSS.

Prova a partire da una marcatura di questo tipo:

<ul>[*]<span>Kid Art</span>
  ...[/list]

Poi vedi come si realizza un rollover senza necessita` di preload:
I fondamenti del rollover grafico: immagini, sprite e text-replacement
Menu grafici con rollover e preload via CSS
Fast Rollovers Without Preload
Bottoni con rollover flessibili

Altri spunti li puoi trovare nelle raccolte di menu (vedi i "link utili").