Visualizzazione dei risultati da 1 a 8 su 8
  1. #1
    Utente di HTML.it L'avatar di andbaz
    Registrato dal
    Jul 2011
    Messaggi
    441

    Rollover: immagine grayscale/colore

    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.

  2. #2
    Moderatore di Annunci siti web, Offro lavoro/collaborazione, Cerco lavoro L'avatar di cavicchiandrea
    Registrato dal
    Aug 2001
    Messaggi
    26,133
    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

  3. #3
    Utente di HTML.it L'avatar di andbaz
    Registrato dal
    Jul 2011
    Messaggi
    441
    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!

  4. #4
    Moderatore di Annunci siti web, Offro lavoro/collaborazione, Cerco lavoro L'avatar di cavicchiandrea
    Registrato dal
    Aug 2001
    Messaggi
    26,133
    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

  5. #5
    Utente di HTML.it L'avatar di Xinod
    Registrato dal
    Sep 2000
    Messaggi
    13,649
    Originariamente inviato da andbaz
    ...cose molto complesse che utilizzano jquery
    ...senza nessun effetto complesso
    ...molto semplice!
    allora non si puo', fallo con 2 immagini

    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
    ...

  6. #6
    Utente di HTML.it L'avatar di carlomarx
    Registrato dal
    Oct 2009
    Messaggi
    1,669
    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!


  7. #7
    Utente di HTML.it L'avatar di carlomarx
    Registrato dal
    Oct 2009
    Messaggi
    1,669
    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!

  8. #8

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.