CODEWITHSUNDEEP
javascripthtmlimagebutton
Jérôme Verstrynge
Jérôme Verstrynge

Reputation: 59576

HTML/JS: Confused about method to create an image button

I need to create a simple button made only of an image, and which will open a JQuery Dialog when the user clicks on it.

I am doing some reading and notice many solutions: <button>, <image> with a <a>, using CSS to modify a button background, etc...

This is confusing, what is the proper way to implement my image button?

Thanks.

P.S.: The button/image should be focussable. An operational JSFiddle example is welcome.

Upvotes: 7

Views: 777

Answers (8)

bumerang
bumerang

Reputation: 1846

As I know You can't change the look of the Safari buttons thats why I suggest to use a for the solution. Here is my simple code: http://jsfiddle.net/djgBK/1/

The basis is:

  1. Take an a element put the link content to the left,

  2. Then replace it with image that is actualy it's background. Becouse it's a element user can select it usin only TAB button.

What's more using an a elemet will let You to put title which will be displayed after hovering/entering over the button.

Upvotes: 2

svineet
svineet

Reputation: 1889

Inside a <button> tag , put your image, and attach an click event to <button> to open the dialog on click.
JSFiddle

Upvotes: 3

terafor
terafor

Reputation: 1626

Use jQuery as you own it...

<html>
    <head>
        <script src="http://code.jquery.com/jquery-1.8.3.js"></script>

        <style type="text/css">
            #theBtn{
                margin: 20% auto 0;
                background: url('http://upload.wikimedia.org/wikipedia/commons/thumb/0/0c/White_and_yellow_flower.JPG/320px-White_and_yellow_flower.JPG');
                width: 100px;
                height: 50px;
            }
        </style>
    </head>
    <body>
        <div id="theBtn"></div>

        <script type="text/javascript">
            $(document).ready(function(){
                $("#theBtn").click(function(){
                    if(confirm('Are you sure?')){
                        $("#theBtn").fadeOut('slow');
                    }
                });
            });
        </script>
    </body>
</html>

Upvotes: 3

J&#233;r&#244;me Verstrynge
J&#233;r&#244;me Verstrynge

Reputation: 59576

I found the solution after many struggles: http://jsfiddle.net/YRY8M/3/.

<html>
  <head></head>
  <body>
    <input type="image" tabindex="0" onclick="doSomething()" src="http://upload.wikimedia.org/wikipedia/commons/thumb/0/0c/White_and_yellow_flower.JPG/320px-White_and_yellow_flower.JPG"
    />
    <br />
    <button tabindex="1">I am focussable too !!!</button>
  </body>
</html>

And some javascript:

function doSomething() {
  alert('Hello!'); 
}

Upvotes: 5

I29
I29

Reputation: 686

Create a button and put background-image for it. Checkout the fiddle. http://jsfiddle.net/siyakunde/Y38nz/

Upvotes: 6

Vassilis Barzokas
Vassilis Barzokas

Reputation: 3242

It depends on what you want to do in every case. There is no guideline that says "you should do it like this", but there are situations that some cases are more suitable than others.

For example according to this review, IE versions of 8 and below have some buggy behaviour regarding <button> tag when trying to use it as a submit button.

Ηowever the <button> has some new attributes added in HTML5 which you can see here , ammong them is autofocus and other useful that will be supported by most modern major browsers.

In your case that you want to maintain the "focus" (i assume with tabbing support), if you use a single <image> as a button (with or without <a>), you will have to add some JS code to make the image focusable when the appropriate tab is pressed. So you will have to write a bit more code to do the same thing.

There is one more solution which might be suitable for you, since you do not need to submit the form to server side. Using the <input type="image" type and defining the src attribute inside it, will be focusable and not require neither any JS code to run nor any difficult CSS. You can find more about it's syntax here

So, it ends up to you to decide which one of all them to use. I would use the one that i find more flexible, easier for me to code, easily reusable and is supported by most of my target browsers.

Upvotes: 3

Quentin
Quentin

Reputation: 943157

The proper way largely depends on what the button will do if JavaScript is not available.

If you are going to submit a form then:

<button> <img src="..." alt="..."> </button>

If you are going to go to a URL then:

<a href="..."> <img src="..." alt="..."> </a>

If you are going to do absolutely nothing (generally not a good idea, you should follow the principles of Progressive Enhancement and Unobtrusive JavaScript, but acceptable if you only generate the button with JavaScript in the first place and the loss to the user is convenience rather then essential functionality):

<button type="button"> <img src="..." alt="..."> </button>

You then bind the JavaScript to either the form's submit event, or the button/anchor's click event and prevent the default behaviour so the form won't be submitted / the link won't be followed if the JavaScript executes successfully.

Upvotes: 9

LPD
LPD

Reputation: 2883

First thing, There is either an image or a button. But not both. I would say, create an image and place your code in the onclick() function of that image.

 var img= $("#my-image-id");
    image.click(function() {
    // your code here
    }

Upvotes: 2

Related Questions