Treehouse: Grow your CSS skills. Land your dream job.

Legend of Grimrock

  • # June 29, 2012 at 6:59 pm


    I am trying to recreate game spell UI using jQuery, kinda stuck here.

    I know how to change src of image on click if it is in HTML code written the normal way (img src1, change to img src 2).
    I do not know how to do this with sprite where is always only transparent.gif.

    There is this toggle class jQuery but I am not sure it is the right one.
    I need to get rid of class .example1 and replace it with .example2

    Code Pen (info in .JS part)

    demo online


    # June 29, 2012 at 7:45 pm

    If all you want to do is toggle classes, that should be pretty easy. Here’s the code below:

    $(this).toggleClass('example1 example2');

    Note: this will work assuming the element already has one of the classes on it (on page load).


    # June 30, 2012 at 2:55 am

    @ChrisxClash thanks

    I made a mistake and created 2 sprites instead of just 1
    so I needed to change 2 classes which is silly
    I will create 1 sprite and just change position of the symbol I need in scope of that 1 image

    # June 30, 2012 at 4:04 am

    Ah alright. Instead of toggle classes you can just move the background position using .css('background-position','0px 0px') etc to change between multiple sprites.

    # June 30, 2012 at 4:33 am

    for handling only 1 icon class
    = off spell
    = on spell

    I made a master sprite

    will try the background “moving”

    # June 30, 2012 at 4:44 am

    hope it will be easier while have 1 constant class . sprite
    so I will only change on click active vs. not active spell classes

    numbers 1 – 9

    close + cast spell icons remain same

    # June 30, 2012 at 4:44 pm

    Here’s what I came up with. For all I know, you may be able to do this with a css3 event, or you could just do a :hover pseudoclass to make the background-position change. Also, might be able to clean up my jQuery a bit.


    # June 30, 2012 at 5:38 pm


    :hover was to easy I wanted to try / learn jQuery and ingame it has to be clicked so that is what I wanted to recreate
    looks good :)

    # June 30, 2012 at 9:40 pm

    Alright, awesome! Let me know if you have any more questions.

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.