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)
If all you want to do is toggle classes, that should be pretty easy. Here’s the code below:
Note: this will work assuming the element already has one of the classes on it (on page load).
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
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.
for handling only 1 icon class
= off spell
= on spell
I made a master sprite
will try the background “moving”
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
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.
: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 :)
Alright, awesome! Let me know if you have any more questions.
You must be logged in to reply to this topic.
*May or may not contain any actual "CSS" or "Tricks".