Advertisement
If you have a new account but are having problems posting or verifying your account, please email us on hello@boards.ie for help. Thanks :)
Hello all! Please ensure that you are posting a new thread or question in the appropriate forum. The Feedback forum is overwhelmed with questions that are having to be moved elsewhere. If you need help to verify your account contact hello@boards.ie

scratch card effect with AJAX

Options
  • 07-04-2009 10:11am
    #1
    Placebo
    Registered Users Posts: 8,070 ✭✭✭


    is it possible?


Comments

  • Options
    #2
    ocallagh
    Registered Users Posts: 3,140 ✭✭✭ocallagh


    what do you mean by scratch card effect? Like have someone actually move their mouse over and over and slowly reveal an image? What do you need AJAX for? You need to provide more info if you want an answer that might help you


  • Options
    #3
    Placebo
    Registered Users Posts: 8,070 ✭✭✭Placebo


    sorry not ajax, just javascript/jquery i suppose

    User moves mouse over and it reveals image underneath.
    Dont really want to use flash


  • Options
    #4
    ocallagh
    Registered Users Posts: 3,140 ✭✭✭ocallagh


    I'd start off with 3 DIVs absolutely positioned right on top of each other with background images. The top DIV would be the metallic grey, the 2nd DIV would be half scratched out and the bottom DIV would be your revealed image. As the mouse moves up and down I'd start fading out the top DIV with opacity/FX transitions until it's gone revealing the DIV below it, next clear that one and so forth - you could increase the number of layers to maybe 4 or 5

    Once you get that working, you could split up each DIV into maybe 6 parts so you'd have 3 layers of 6 DIVs. And only if the mouse moves up and down over on of these 6 parts would I start to fade out it's top DIV.

    I prefer using Mochikit but jquery has mouse co-ordinate stuff and also FX transitions.


  • Options
    #5
    Placebo
    Registered Users Posts: 8,070 ✭✭✭Placebo


    thanks, was thinking of something similar, however, is it possible for the image to be printed in full without any of the overlays showing, worst case scenario, i can use flash but just tested and it prints the flash overlay !


  • Options
    #6
    mewso
    Moderators, Science, Health & Environment Moderators Posts: 8,956 Mod ✭✭✭✭mewso


    How about images with 1x1 pixel divs covering them and then when the user moves over one of these pixels you hide it. Latest jquery has the "closest" function which could allow you to remove the closest pixel to the cursor quickly and easily. Probably messy with so many divs but to get the full effect...


  • Advertisement
Advertisement