Forums

krysak4ever

hi,

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)
http://codepen.io/krsiakdaniel/pen/6/3

demo online
http://labs.krsiak.cz/misc/legend-of-grimrock/

sprites
http://labs.krsiak.cz/misc/legend-of-grimrock/img/e-sprite.png
http://labs.krsiak.cz/misc/legend-of-grimrock/img/f-sprite.png

ChrisxClash

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

$('.sprite').click(function(){
  $(this).toggleClass('example1 example2');
});

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

link: http://codepen.io/chrisxclash/pen/4/1

krysak4ever

@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

ChrisxClash

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.

krysak4ever

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

I made a master sprite
http://labs.krsiak.cz/misc/legend-of-grimrock/img/sprite.png

will try the background "moving"

krysak4ever

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
http://krsiakdaniel.minus.com/lJlMgJN98cOby

close + cast spell icons remain same

ChrisxClash

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.

link: http://codepen.io/chrisxclash/pen/4/5

krysak4ever

thanks

: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 :)

ChrisxClash

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

treehouse : what would you like to learn today?

Forums

Legend of Grimrock