ho un css :
codice:
BODY {font: 16px Comic Sans MS,sans-serif; font-weight: 700;scrollbar-base-color :#74ABD2;}
A:LINK {
color : #0066FF;
text-decoration: none
} 
A:VISITED {
color : #1A5985;
text-decoration: none
} 
A:HOVER {
color : #1A5985;
text-decoration : underline;
} 
A:ACTIVE {
color : #1A5985;
text-decoration: underline}

a  {font: 16px Comic Sans MS,sans-serif; font-weight: 700;}

p {font: 16px Comic Sans MS,sans-serif; font-weight: 700;}

ul {font: 16px Comic Sans MS,sans-serif; font-weight: 700;}

.photo {
   width:131px; height:100px;
   background:url(cornice.png) no-repeat 50% 30%;
}
.photo img {
   width:127px; height:96px;
   margin:6px;
}
a img {
   border:none;
}
ora vedete .photo {
width:131px; height:100px;
background:url(cornice.png) no-repeat 50% 30%;

vorrei che per esempio quando il mouse è "hover"
l'url dell'immagine cornice cambi per esempio in cornice2.png quindi che venga applicato questo:

.photo {
width:131px; height:100px;
background:url(cornice2.png) no-repeat 50% 30%;

come faccio ???