1

My HTML structure is: 

   <div class="box_container">
      <a class="box_one entire_sprite_image" href="#"></a>
      <a class="box_two entire_sprite_image" href="#"></a>
    </div>

Onclick of box_one or box_two I want them to go to an active state. I intend to use JQuery to do that. So when box_one or box_two is clicked the image color changes to reflect active state.

I am not sure how I can use JQuery to do this because instead of having two different images for each box I am using a sprite image.

I am new to Jquery but got up to this point:

(function ($) {
      $(document).ready(function() {
      $(".box_one, .box_two").click(function () {

      });
  });
    })(jQuery);

How can I still use Jquery to change the image when clicked and change back to original when clicked on that image again and when something else is clicked?

starbucks
  • 2,926
  • 9
  • 41
  • 53

2 Answers2

1

My assumption is that your asking how to change the sprite on the element that was clicked. To do that you'd adjust the background-position of the clicked element as shown here:

$(document).ready(function(){
    $(".box_one, .box_two").click(function () {
        $(this).css('backgroundPosition', '0 -54px'); // replace values with appropriate sprite values
    });
});

Please clarify if you're use case is different from this.

UPDATE: use an active class and toggle it. toggle active class by clicking on other elements.

<div class="box_container">
      <a class="box_one active" href="#"></a>
      <a class="box_two" href="#"></a>
</div>

$(document).ready(function(){ 
    $(".box_one").click(function () { 
        $(this).toggleClass('active');
    }); 

    $(my_selected_elements).not(".box_one").click(function () { 
        $(this).toggleClass('active');
    }); 
});
Stone
  • 2,608
  • 26
  • 26
  • Your solution works. I am still working on it i will let you know if i need some more help integrating it! Thanks! – starbucks May 23 '13 at 19:47
  • Instead of doing css with that can't we make it swap the class, that will be better I think since using this method will mean more css to add to it. – starbucks May 23 '13 at 19:48
  • Absolutely, good idea. Switching classes is probably a bit cleaner. Please accept the answer when you're satisfied with the results. Let me know if you need more help! – Stone May 23 '13 at 19:51
  • Hey Stone, possible for you to update the answer so that it swaps teh classes? – starbucks May 23 '13 at 19:53
  • I got it working but if you can twaeak this it will be hlepful: $(document).ready(function(){ $(".box_one").click(function () { $(this).toggleClass('box_one') $(this).toggleClass('box_one_active') }); }); now how do i toggle the class back to normal if clicked elsewhere? Thanks! – starbucks May 23 '13 at 19:57
  • sure - just user an active class though. don't have box_one_active. use box_one & active. – Stone May 23 '13 at 20:21
1

use classes for the swap

    .box_one{
         background : 'imgUrlOne'
    }

    .box_one.swap{
         background : 'imgUrlOneSwap'
    }

    .box_two{
         background : 'imgUrlTwo'
    }

    .box_two.swap{
         background : 'imgUrlTwoSwap'
    }

<div class="box_container">
      <a class="box_one entire_sprite_image" href="#"></a>
      <a class="box_two entire_sprite_image" href="#"></a>
</div>

Javascript

(function ($) {
      $(document).ready(function() {
      $(".box_one, .box_two").click(function () {
            $(this).hasClass('swap') ? $(this).removeClass('swap')  
                                     : $(this).addClass('swap')
      });
});(jQuery);

Updated Check Fiddle

Sushanth --
  • 55,259
  • 9
  • 66
  • 105
  • Anything in jQuery can be definitely done in javascript as the former is a library of the latter – Sushanth -- May 23 '13 at 19:32
  • I meant without javascript. I was told not to use Jquery/JS and that I can do it without it. I doubted it so wanted to double check. – starbucks May 23 '13 at 19:32
  • Check this on how you can add and remove a class with javascript ... http://stackoverflow.com/questions/195951/change-an-elements-css-class-with-javascript – Sushanth -- May 23 '13 at 19:35
  • A bit confused with your code. INstead of swap do I enter the class where I have the sprite image? – starbucks May 23 '13 at 19:38
  • This is just a rough example .. Where in there are 2 classes for each image, one when default and other when active.. So your sprite image will be defined in the class along with the background position.. So the only thing that you would be doing is adding or replacing the class will take care of applying the corresponding image to the image – Sushanth -- May 23 '13 at 19:40
  • can you modify your code so that instead of it using hasClass .swap it simply swaps it with the class itself like: box_two.swap – starbucks May 23 '13 at 19:41
  • That will be too messy as you don't know what class to apply to the image, because you will be replacing the original class on it – Sushanth -- May 23 '13 at 19:43
  • let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/30519/discussion-between-starbucks-and-sushanth) – starbucks May 23 '13 at 19:58