Change the position of a sprite image set as background using click on image mapping

Question

I have searched for about an hour to find a solution to my problem but I can't find much help.

I have a div with sprite image set as a background image, so that one image sits on top of the other in a single jpg. And when you hover over the div it changes the position of the sprite image so that you see an alternative state.

I want to use image mapping so that when you click on one section of the background image, this will change the positioning of the sprite background image to display the alternative state. clicking on it again will return it to it's original state.

I hope this makes sense and thank you for your time.

.imageswap {
    list-style: none;
    height: 495px;
    width: 940px;
    display: block;    
    background: url('/HTMLContent/images/frozenpeas_web_sprite3.jpg') 0 0;
}

.imageswap:hover{
    background-position: 0 -495px;
}

<div class="ContentBorders imageswap" style="margin:0 auto;">
    <div class="textandlogo" style="width: 249px; height: 145px; padding: 0; z-index: 99; float: left;">
        <img src="/HTMLContent/images/frozenpeas_logo.png" height="94" width="344" />
        <p class="sucktextblack" style="text-align: left; padding: 0 0 0 17px; margin: 0; width: 255px;">
            <strong>Make Ice Balls</strong><br />
            Ice cubes and a  refreshing drink go together like peas in a pod, which is why we bring you the  frozen peas ice cube mould! Frozen ice peas home-grown from your own freezer  and completely reusable. Perfect for hap-pea occasions or just for vegging out  in front of the TV. Easy peasy<br />
            <span class="sucksmall" style="text-align: left;" >Design by Alessandro Martorelli</span>
        </p>
    </div>

    <div style="width: 202px; height: 202x; padding:0; margin: 270px 20px 0 0; z-index: 98; float: right;">
        <img src="/HTMLContent/images/frozenpeas_circle.png" height="202" width="202" />

Answer 1

Is this what you are looking for?

CSS:

.imageswap.active,
.imageswap:hover {
    background-position: 0 -495px;
}

jQuery:

$(".imageswap").click(function() {
    $(this).toggleClass("active");
});

Answer 2

I think this is what you need: https://stackoverflow.com/a/14567489/2645724

To help place links on top of the image, reference this: http://www.neopets.com/~Kacizilla

Hope this helps.