Originariamente inviato da cavicchiandrea
In tal caso usa jquery, fare quella transazione con js sarebbe molto, molto, molto, più complessa e dovresti avere una conoscenza elevata di js.
Non è poi così difficile

@andbaz
Fossi in te eviterei di caricare jQuery per una cosa così stupida…:

codice:
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Esempio per il forum di HTML.it</title>
<script type="text/javascript">
function prepareMouseEvents(sImageId) {
	var oImage = document.getElementById(sImageId), oCanvas = document.createElement("canvas"), oCtx = oCanvas.getContext("2d"), nWidth = oImage.offsetWidth, nHeight = oImage.offsetHeight;
	oCanvas.width = nWidth;
	oCanvas.height = nHeight;
	oCtx.drawImage(oImage, 0, 0);
	var sColorSch = oCanvas.toDataURL(), oImgData = oCtx.getImageData(0, 0, nWidth, nHeight);
	for (var nPixel = 0, aPix = oImgData.data, nPixLen = aPix.length; nPixel < nPixLen; nPixel += 4) { aPix[nPixel + 2] = aPix[nPixel + 1] = aPix[nPixel] = (aPix[nPixel] + aPix[nPixel + 1] + aPix[nPixel + 2]) / 3; }
	oCtx.putImageData(oImgData, 0, 0);
	var sGraySch = oCanvas.toDataURL();
	oImage.onmouseout = function() { oImage.src = sColorSch; };
	oImage.onmouseover = function() { oImage.src = sGraySch; };
}
</script>
</head>

<body onload="prepareMouseEvents('miaImmagine');">
[img]chagall.jpg[/img]
</body>
</html>
N.B. Può darsi che non ti funzioni in locale, ma solo se messa online!