Hover + click on image button

Question

I try to write a jQuery code to manage my images buttons.

I would like to create buttons with this behaviours : http://jsfiddle.net/Xroad/fhL7w/17/

But the difference is that they are images buttons. I have several. So I would like to manage with their file names "-normal", "-hover".

My images buttons don't behave as I would : http://jsfiddle.net/Xroad/z562Y/ how can I fix it ?

I wrote this :

<img id="btn-clients" class="btn toggleImg rollover" src="http://pepitodanger.free.fr/forms/images/clients-normal.png" alt="">

function toggleImg() {
    var file = $(this).attr('src');
    var src = (file.indexOf('-hover') == -1) ? file.replace("-normal", "-hover") : file.replace("-hover", "-normal");
    $(this).attr("src", src);
}

$('.toggleImg').hammer().on(Modernizr.touch ? 'tap' : 'click', toggleImg);



$('img.rollover').on('mouseenter', function () {
    this.src = this.src.replace("-normal", "-hover");
});

$('img.rollover').on('mouseleave', function () {
    this.src = this.src.replace("-hover", "-normal");
});

@DaveZych Ok but if I have several images buttons ? I have to manage the "background: url()" for everyone ? :-/ — Xroad
– Xroad, Commented Dec 27, 2013 at 15:43
Please include a question, or description of the problem you are having. Thanks! — Tom Pietrosanti
– Tom Pietrosanti, Commented Dec 27, 2013 at 15:44

adeneo · Accepted Answer · 2013-12-27 15:47:54Z

1

function toggleImg(e) {
    if (e.type == 'click') {
        $(this).data('clicked', !$(this).data('clicked'));
    }else if (!$(this).data('clicked')) {
        this.src = this.src.indexOf('-hover') == -1 ? this.src.replace("-normal", "-hover") : this.src.replace("-hover", "-normal");
    }
}

$('.toggleImg').hammer().on(Modernizr.touch ? 'tap' : 'click', toggleImg);
$('img.rollover').on('mouseenter mouseleave', toggleImg);

FIDDLE

answered Dec 27, 2013 at 15:47

adeneo

319k29 gold badges410 silver badges392 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

David · Accepted Answer · 2013-12-27 15:49:03Z

The issue is that the example code is doing two things:

Changing a color
Changing a class

Whereas your code does only one thing:

Changing a src image

So both events in your code (hover, click) do the same thing, and subsequently undo the same thing. In order to achieve the result of the example, you should break the events into two things:

Changing a background
Changing a class

Take a look at a modified version of your code here. What I've done is simplified the markup a little and turned the img into a div (to be styled with a background):

<div id="btn-clients" class="btn inactive" />

Then I styled it with the hover change, as well as created some additional classes for the click events:

html, body {
    background: #d2d4d5;
}
.btn {
    cursor: pointer;
    width: 26px;
    height: 19px;
    background: url(http://pepitodanger.free.fr/forms/images/clients-normal.png);
}

.btn:hover {
    background: url(http://pepitodanger.free.fr/forms/images/clients-hover.png);
}

.active {
    background: url(http://pepitodanger.free.fr/forms/images/clients-hover.png);
}

.inactive {
    background: url(http://pepitodanger.free.fr/forms/images/clients-normal.png);
}

Finally, the JavaScript is simplified to match the original example for simply toggling the classes:

$('.btn').on(Modernizr.touch ? 'tap' : 'click', function () {
    $(this).toggleClass('inactive active');
});

This much more closely matches the implementation of the example, and thus mimics the functionality.

Thank you. I know :( but I have several buttons to manage. I must write each background: url() for each images buttons ? Guess I have more than 10 to manage ?
@Xroad: If they're different then yes. Of course, if they're different then you already need to manage several src attributes. You may be able to make it more generic in JavaScript, directly modifying the style properties instead of using existing CSS classes. However, while the result may be fewer lines of code, it would likely also be more complex and more fragile and, thus, more difficult to support.

Collectives™ on Stack Overflow

Hover + click on image button

2 Answers 2

Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Related