una soluzione (non credo sia l'unica e nenache la migliore) è quella di avere le due immagini (quella a colori e quella in bianco e nero) sovrapposte sulla pagina e tramite css ne imposti una con
visibility="visible" e l'altra con
visibility="hidden" e al passaggio del mouse inverti la visibilità con js...forse col codice sarà più chiaro:
Codice:
<html>
<head>
<script language="javascript">
function uno(){
document.all.container1.style.visibility="visible";
document.all.container2.style.visibility="hidden";
}
function due(){
document.all.container1.style.visibility="hidden";
document.all.container2.style.visibility="visible";
}
</script>
<style type="text/css">
#container1{
position:absolute;
top:2in;
left:2in;
width:2in;
visibility:visible;
}
#container2{
position:absolute;
top:2in;
left:2in;
width:2in;
visibility:hidden;
}
</style>
</head>
<body>
<div id="container1">
<img src="/cartella/immagine_colore.jpg" alt="colore" width="300" height="300" onmouseover="javascript:due();">
</div>
<div id="container2">
<img src="/cartella/imagine_bianconero.jpg" alt="biancoEnero" width="300" height="300" onmouseover="javascript:uno();">
</div>
</body>
</html>