Toggle class for images

Toggle class for images

I have a series of images that a user can select. I want to change the mouse pointer when they hover over the each image. I want to display the image with a red border after they select it. Each image is set up like this:

<asp:Image ID="imgHorse" src="../Images/Horse.png" class="SelectableImage" runat="server" alt="Horse"/>

My JQuery is as follows:

  2. <script type="text/javascript">
  3.                                     // Bind hover and click events to images
  4.                                     $(".SelectableImage")

  6.                                     .hover(function () {
  7.                                         $(this).css("cursor", "pointer");
  8.                                     })

  10.                                     .click(function () {
  11.                                         $(".SelectedImage").removeClass("SelectedImage");
  12.                                         $(this).addClass("SelectedImage");
  13.                                     });
  14.                                 </script>

  16. This code works the first time I select an image. I can hover over each image and the cursor changes from "cursor" to "pointer" and the selected image displays a red border (linked to the SelectedImage class). However if I go to the next page and come back while it still works with the other images I can't now change the cursor when hovering over the original one after I select another one. Furthermore I can't select it and show the red border.

  18. I tried using toggleClass too but it's not working.