<CSS> come faccio ad inserire imageRollOver

[hankie]

Salve ragazzi come faccio ad inserire delle ImageRollOver nella mia pagina Html creata con CSS ??

[floyd46]

ciao
dovresti associare le 4 pseudoclassi (a:link, a:visited, a:hover, a:active)
sul link per effettuare lo scambio immagine.
Floyd

[hankie]

hai un esempio qualcosa, non sono molto pratico!!!

grazie per la risposta !!

[hankie]

nessuno ????

[Davide80]

vai quì

[hankie]

Grazie mille Davide !!

Premetto che sono davvero un neofita con CSS, ho letto l'articolo, ho letto praticamente tutto mi è stato molto utile, ma il mio problema e che non so com'e' fatto il codice e dove posizionarlo all'interno del CSS, se potresti farmi un'esempio mi semplificheresti molto la vita!!

In pratica io devo inserire due JPG una per la posizione di rollOver e una di RollOut, gli esempi che ho visto fino adesso creano dei menu solamente con il codice, ma non implementano JPG!, forse mi sto solamente perdento in un bicchiere d'acqua!!!


grazie mille davvero !!!!

[Kaos50x]

prova così

html

<div class="roll">
</div> 

CSS

.roll { background-image: url(...); height: dell' immagine; width: dell' immagine;}
.roll a:hover {background-image: url(l' altra immagine);} 

prova dovrebbe funzionare

[hankie]

KAoS !!!!

scusami piccola nota.

ma questo codice che mi hai postato va inserito all'interno del CSS cosi come lo vedo, non dovrebbe essere messo dentro una classe chiamata roll

mi spiego meglio:

#roll{
.roll { background-image: url(...); height: dell' immagine; width: dell' immagine;}
.roll a:hover {background-image: url(l' altra immagine);}
}

e solo un dubbio !!!


Sono troppo inflenzato da AS2.0 di flash !!!

[hankie]

Non so ci sta qualcosa che non va !!!!!

questo e il codice css del mio layout:

body {
margin: 0px;
height:100%;
background-image: url(pat1.gif);
repeat-y;
}
.principaless1{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
font-style: italic;
color: #333333;
text-align: left;
}
.principaless {
font-family: MiniKongo;
font-size: 8px;
color: #333333;


}
.caratterecc {
font-family: MiniKongo;
font-size: 8px;
color: #000000;



}



div#contenitore{
width: 100px;
height: 237px;
background-color: #996666;
position:absolute;
top:0px;
left:200;


}
div#contenitore1{
width: 400px;
height: 237px;
background-color: #996666;
position:absolute;
top:0px;
left:300px;


}
div#contenitore2{
width: 100px;
height: 237px;
background-color: #996666;
position:absolute;
top:0px;
left:700px;

}
div#contenitore3{
width: 100px;
height: 237px;
background-color: #996666;
position:absolute;
top:237px;
left:200px;

}
div#contenitore4{
width: 400px;
height: 237px;
background-color: #996666;
position:absolute;
top:237px;
left:300px;
}
div#contenitore5{
width: 100px;
height: 237px;
background-color: #996666;
position:absolute;
top:237px;
left:700px;

}

.roll {
background-image: url(main_pic/flash_norm.gif);
height:42;
width:42;
}
.roll a:hover {
background-image: url(main_pic/flash_roll.gif);
}



questo e la parte html che ho aggiunto

<div class="roll">
roll
</div>



questo è il risultato:

http://www.theinvaders.it/the_inv_htmlv1/main.htm


cosa sbaglio ?????

[Mich_]

Ci sono errori CSS, errori di path ed anche erorri XHTML.

Anzitutto devi sapere che in IE6 la pagina viene visualizzata quirk mode: il DOCTYPE non viene letto, in quanto preceduto dal prologo XML.

L'attributo repeat-y non esiste. forse volevi scrivere:
background-repeat: repeat-y;

Non si puo` scrivere direttamente nei <div> : devi iserire un tag tipo

e scrivere dentro esso (stai usando XHTML Strict)

Non esistono le immagini tipo:
http://www.theinvaders.it/the_inv_ht...flash_norm.gif
forse e` un problema di path, dato che invece esiste:
http://www.theinvaders.it/the_inv_ht...flash_norm.gif
ma il browser va a cercare la prima, non la seconda.