Vai al contenuto
jQuery Italia
jQuery Italia

La community italiana di jQuery

  • HOME
  • IMPARA
    • Tutorials jQuery Italia
    • Tutorials dal web
    • Supporto ed Aiuto
  • CONTRIBUISCI
    • Nuovo Articolo
    • Nuovo Tutorial
  • SVILUPPA
    • Snippets
    • Tools
    • Download
    • Plugins
    • Links
  • NOTIZIE
    • jQuery
    • jQuery UI
    • Projects
  • CONTATTI
  • LOGIN
  • REGISTRATI

canvas css jquery modifica per l'effetto hover

Home › Forum › Supporto ed Aiuto › Richieste di aiuto, script e tutorial

Scrivi le tue richieste di aiuto nella sezione relativa.
Richieste di aiuto generiche o riguardanti script o tutorial creati dalla community jQuery Italia.
  • Questo topic ha 25 risposte, 2 partecipanti ed è stato aggiornato l'ultima volta 6 anni, 11 mesi fa da Paolo.
Stai visualizzando 10 post - dal 1 a 10 (di 26 totali)
1 2 3 →
  • Autore
    Post
  • 31 Dicembre 2013 alle 03:05 #5669
    Paolo
    Partecipante

    Ciao ragazzi, avrei bisogno del vostro aiuto. In pratica vorrei modificare questo script. Non vorrei i pulsanti ma l’immagine colorata che torna normale quando c’è l’hover del mouse. Potreste darmi una mano a modificare? vi ringrazio.

    3 Gennaio 2014 alle 12:44 #5670
    jqueryitalia
    Amministratore

    Ciao Paolo.

    E’ tutto abbastanza semplice, l’unico problema è che la funzione che cambia colore all’immagine non ha un reset.
    Per questo motivo, all’inizio devi salvarti il valore dell’immagine in una variabile e successivamente eseguire le azioni sul mouseover e sul mouseleave.

    La funzione che dovrai scrivere sarà quindi la seguente:

    $( function() {
        var realImg = $("#myImage").attr('src'); // recupero l'immagine
        $("#myImage").on("mouseover", function() {
            tintImage(document.getElementById('myImage'), "#000000"); 
        }); 
        $("#myImage").on("mouseleave", function() { 
            $(this).attr('src', realImg );
        });    
    });

    ed otterrai il risultato voluto, come puoi vedere anche nel tuo esempio che ho modificato e che trovi qui http://jsfiddle.net/KvLB4/2/

    Buon lavoro!

    12 Gennaio 2014 alle 18:06 #5693
    Paolo
    Partecipante

    Grazie mille. Cercherò di modificarla. Vorrei ricreare l’effetto contrario, nel senso che l’immagine possa recuperare i colori con il mouseover.

    13 Gennaio 2014 alle 01:25 #5694
    Paolo
    Partecipante

    Ciao Jqueryitalia. se posso, mi permetto di chiederti un paio di cose.
    Io ho invertito le funzioni sotto. Perchè vorrei invertire l’effetto. C’è un problema però. L’immagine che viene visualizzata al completamento del caricamento della pagina è l’immagine contenuta nella variabile realImg che è quella originale. Devo passare con il mouse per vedere l’immagine virata. come posso partire subito con l’immagine virata?

    $( function() {
        var realImg = $("#myImage").attr('src'); // recupero l'immagine
        $("#myImage").on("mouseover", function() {
            $(this).attr('src', realImg ); 
        }); 
        $("#myImage").on("mouseleave", function() { 
            tintImage(document.getElementById('myImage'), "#000000");
        });    
    });

    La seconda: l’opacità tra uno stato e l’altro la passo via css giusto?

    Ti ringrazio per l’attenzione.

    13 Gennaio 2014 alle 10:25 #5695
    jqueryitalia
    Amministratore

    Ho creato questo esempio per te: http://jsfiddle.net/4Q89U/1/

    Spero ti chiarisca le idee e possa esserti utile 😉

    P.S.: occhio ad utilizzarlo se hai molte immagini, potrebbe impallare il browser.

    13 Gennaio 2014 alle 22:47 #5697
    Paolo
    Partecipante

    Ciao JqueryItalia,

    ti ringrazio davvero tanto per la disponibilità e l’attenzione. Sto leggendo un libro di Apogeo, la guida completa Jquery, sto imparando almeno a riconoscere eventi e metodi, ma sono lontano dalla piena padronanza di jquery.

    Ritornando al nostro esempio, nella mia pagina dovrei mettere una immagine soltanto. L’ultimo tuo esempio va benissimo, però per questo progetto legato all’associazione di un mio carissimo amico ho bisogno di virare l’immagine in un colore specifico, non in grayscale…

    Se mi dai qualche indicazione posso provare io a modificare l’ultima funzione. Sempre se non disturbo troppo. Grazie ancora.

    15 Gennaio 2014 alle 17:34 #5700
    Paolo
    Partecipante

    Ciao JqueryItalia, sto cercando in rete, ma non ho trovato ancora nulla 🙁

    17 Gennaio 2014 alle 01:22 #5701
    jqueryitalia
    Amministratore

    La mancanza di documentazione in rete non significa che non si possa fare… 😉
    Ecco qui la soluzione (sfruttando la tua funzione iniziale ed il mio codice): http://jsfiddle.net/4Q89U/12/

    Buon lavoro!

    18 Gennaio 2014 alle 00:21 #5702
    Paolo
    Partecipante

    Grazie Jquery, la sto modificando perchè vorrei ottenere l’effetto invertito… che si veda rossa e normale quando ci vado su con il mouse… ma non riesco ad ottenere ancora quello che voglio… sto modificando le due funzioni mouseover mouseout, ma evidentemente non basta… cosa dovrei modificare?

    18 Gennaio 2014 alle 19:56 #5707
    jqueryitalia
    Amministratore

    In effetti non basta modificare solo le funzioni mouseover e mouseout.

    Ecco la soluzione definitiva http://jsfiddle.net/4Q89U/18/ 😉

  • Autore
    Post
Stai visualizzando 10 post - dal 1 a 10 (di 26 totali)
1 2 3 →
  • Devi essere connesso per rispondere a questo topic.
Accesso
Accedi con Facebook
Accedi con Google
Accedi con Twitter

Login

Accedi con Facebook
Accedi con Google
Accedi con Twitter
  • Registrati
  • Password dimenticata?

SOSTIENI jQuery Italia

Aiuta la Community di jQuery Italia a rimanere in vita per contribuire a diffondere le conoscenze di base ed avanzate di jQuery.

Download in evidenza

  • gmap104.html (3588 download)
  • jqueryformwizard-201.html (3217 download)
  • jquery-1.4.1.min.js (3138 download)
  • tinytips11.html (3123 download)
  • jquery-ui-1.8rc1.zip (2988 download)
  • jquerytools120.html (2917 download)
  • jquery-1.4.2.min.js (2903 download)
  • calendarPicker.html (2891 download)
  • 1.0.0.zip (2884 download)
  • move-background.html (2853 download)

jQuery Links

  • jQuery Howto
  • jQuery Official Site
  • jQuery UI Official Site
  • Learning jQuery
  • Use jQuery

SITO SEGNALATO SU

Sito segnalato da Freeonline.it - La guida alle risorse gratuite Mooseek.com - Web Directory, Download Software, Giochi Online, Video Tecnologici, Siti d'Affari

TAG

aggiornamento (3) ajax (5) Android (5) animazione (49) api (10) BlackBerry (4) calendario (3) canvas (4) css3 (9) form (12) framework (41) gallery (8) google (5) html5 (11) immagini (38) javascript (29) jQuery (160) jQuery UI (15) Linux Day (3) maps (3) menu (6) mobile (10) modalbox (2) open source (4) overlay (3) plugin (93) Plugins (17) presentation cycle (4) projects (11) responsive (5) slider (7) slideshow (18) Smartphones (5) Tablets (4) template (5) tooltip (6) tutorial (12) twitter (2) upload (3) utility (18) VELug (3) video (3) widget (3) WYSIWYG (2) zoom (3)
jQuery Italia

La community italiana di jQuery

  • Facebook
  • Twitter
  • Linkedin
  • Youtube
Tutti i loghi ed i marchi contenuti e citati in questo sito sono dei rispettivi propietari.
Privacy Policy
Cookies Policy
COPYRIGHT © 2010 - 2022 jQuery Italia
Designed By ZeeTheme
Posting....