Esiste un sistema per cui io quando mi posiziono con il mouse sopra ad un'immagine, questa da scala di grigi diventa colorata; e quando ci tolgo il mouse sopra di questa, ritorna in bianco e nero?
Se si, mi potreste indicare un link, un tutorial, oppure una guida?
Ho cercato nel web, però ho trovato tutte cose molto complesse che utilizzano jquery
PS: ovviamente la natura di questa immagine è di rgb, e non scala di grigi.
Ma esattamente cosa vuoi fare uno swap-imagine (con due immagini) con fade? O creare un transizione colore > scala di grigi?
Cavicchi Andrea
Problemi con javascript, jquery, ajax clicca qui
Esempio: io vorrei che nella mia pagina html mi venisse caricata un'immagine, però caricata in bianco e nero, e che al onmouseover questa si colorasse, senza nessun effetto complesso, e che al onmoueout questa tornasse in bianco e nero, molto semplice!
In tal caso usa jquery, fare quella transazione con js sarebbe molto, molto, molto, più complessa e dovresti avere una conoscenza elevata di js.
Cavicchi Andrea
Problemi con javascript, jquery, ajax clicca qui
allora non si puo', fallo con 2 immaginiOriginariamente inviato da andbaz
...cose molto complesse che utilizzano jquery
...senza nessun effetto complesso
...molto semplice!
soluzioni piu' moderne dietro le quinte fanno tante cose parecchio complesse
(canvas + filtro grayscale per IE)
http://www.pixastic.com/lib/docs/actions/desaturate/
http://webdesignerwall.com/tutorials...le-image-hover
...
Non è poi così difficileOriginariamente 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.
@andbaz
Fossi in te eviterei di caricare jQuery per una cosa così stupida…:
N.B. Può darsi che non ti funzioni in locale, ma solo se messa online!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>
Dimenticavo... devi aggiungere il filtro grayscale per le vecchie versioni di IE (che non supportano l'elemento canvas), come ti ha detto Xinod. È una cosa molto semplice da fare, ma io non posso farla perché uso Linux. Chiedi aiuto a qualcun altro!
Permessi di invio
Rispondi quotando