jQuery - Changing on click and on hover

Question

I have 5 different img tags and for each tag there are four different states: on, on-hover, off, and off-hover. All of which have a corresponding src which I am changing with jQuery, so a total of 20 different png files. This all works fine, the problem comes when I have text next to each img tag that needs to change color according to what the img tag it is next to is changing. I also need the img tag to change if the text is either clicked on or hovered.

HTML Code:

<div class="sheilds">
    <img class="sheild_icon" id="icon1" src="../img/icon1-on.png"  />
    <img class="sheild_icon" id="icon2" src="../img/icon2-on.png" />
    <img class="sheild_icon" id="icon3" src="../img/oxicon-on.png" />
    <img class="sheild_icon" id="icon4" src="../img/icon4-on.png" />
    <img class="sheild_icon" id="icon5" src="../img/icon5-on.png" />
</div>

<div class="text_pannel">
    <div class="icon_text" id="text_icon1"><p>Outdoors</p></div>
    <div class="icon_text" id="text_icon2"><p>Groups</p></div>
    <div class="icon_text" id="text_icon3"><p>Icons</p></div>
    <div class="icon_text" id="text_icon4"><p>Sports</p></div>
</div>

JavaScript/JQuery Code:

$(".sheild_icon")
    .mouseover(function() {
        this.src = this.src.replace('.png', '-hover.png');
    })
    .mouseout(function() {
        this.src = this.src.replace('-hover.png', '.png');
    })
    .click(function() {
        if (this.src.indexOf('-on') > -1) this.src = this.src.replace(/(.*)-on(.*)/, "$1-off$2");
        else this.src = this.src.replace(/(.*)-off(.*)/, "$1-on$2");
    }
);

Here is my fiddle

Answer 1

what about this:

adding and removing a different class to those text-elements.

http://jsfiddle.net/Ca2Kn/1/

<script type="text/javascript">
$(".sheild_icon")
    .mouseover(function() {
        this.src = this.src.replace('.png', '-hover.png');
        $('#text_'+this.id).addClass('active');
    })
    .mouseout(function() {
        this.src = this.src.replace('-hover.png', '.png');
        $('#text_'+this.id).removeClass('active');
    })
    .click(function() {
        if (this.src.indexOf('-on') > -1) {
            this.src = this.src.replace(/(.*)-on(.*)/, "$1-off$2");
            $('#text_'+this.id).addClass('active2');
        }
        else {
            this.src = this.src.replace(/(.*)-off(.*)/, "$1-on$2");
            $('#text_'+this.id).removeClass('active2');
        }
    }
);
</script>


<style type="text/css">
.active,
.active2 {
    color:red;
    font-size:20px;
}
</style>

Answer 2

You should really be using CSS to do this.

<div class="icon_text" id="text_icon1"><p>Outdoors</p></div>

Becomes:

<div class="icon1"> Outdoors</div>

CSS:

.icon1 {
    background-image:url(/img/icon1-on.png);
    background-repeat:no-repeat;
    height:20px;
    padding-left:20px;
}

.icon1:hover {
    background-image:url(/img/icon1-hover.png);
}

.icon1.active {
    background-image:url(/img/icon1-off.png);
    color:#f00;
}

JS:

$(".sheild_icon").on('click', function() {$(this).addClass('active')});