Use Image as Button and Toggle Image on Click

Question

I've found quite a bit on how to solve this problem, but I can't seem to get it working. I want to use an image that has the functionality of a button. The following code works well, but is neither great style, nor will it be able to switch the image it uses.

<input type="image" id="mToggle" src="images/chevronright.jpg" width="48" height="48"></input>

I should be able to do something like the following:

HTML

<input type="image" id="mToggle" class="right" width="48" height="48"></input>

CSS

.left{
    background-image: url("images/chevronLeft.jpg");
}

.right{
    background-image: url("images/chevronRight.jpg");
}

JavaScript

$("#mToggle").click(function(){
    $('#mToggle').toggleClass('left');
});

This should give me a button that is initially a right arrow and will swap between left and right every time upon the click.

Edit: I should mention that the second method that I described only results in the default "Submit Query" text appearing for the No picture is displayed.

Thanks in advance.

That was a typo on my part. It was correct in the code. I've tried both with and without quotes inside of toggleClass — Zared H
– Zared H, Commented Jul 20, 2015 at 18:59
maybe remove the src.. and set id="mToggle" your html is not right.. — Medda86
– Medda86, Commented Jul 20, 2015 at 19:01

Zakaria Acharki · Accepted Answer · 2015-07-20 19:13:55Z

2

See Working fiddle of your code :

HTML :

<input type="image" id="mToggle" class="right" width="64" height="64" value=' '></input>

JS :

Just add the ready funciton $(function(){ }); to specify a function to execute when the DOM is fully loaded.

$(function(){
    $("#mToggle").click(function(){
        $('#mToggle').toggleClass('left right');
    });
});

I hope this will help.

edited Jul 20, 2015 at 19:13

answered Jul 20, 2015 at 19:07

Zakaria Acharki

67.5k15 gold badges79 silver badges106 bronze badges

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

3 Comments

Zared H Over a year ago

The text "Submit Query" still appears on my live version. Any ideas as to how to get rid of it?

Zakaria Acharki Over a year ago

appear insead the button ? try to add value=" " just like i added in my answer.

Zared H Over a year ago

That was it. Thank you.

Collectives™ on Stack Overflow

Use Image as Button and Toggle Image on Click

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related