Use <a> or <div> for the image buttons

Which way is better for making image buttons?

Using <a>: set background image to my image have to specify <a href="#">, however, there will be a url in browser stat开发者_如何学JAVAus bar, which is a bit annoying.

Using <div>: set background image to my image no url shows in browser status bar, however, have to add cursor:pointer in .css

I wouldn't go for a div personally, because semantically a div is not a button. If you want a button that performs a JavaScript action, I'd probably just use the <button></button> tag. You can place other HTML elements inside a button tag as you would a div, and it's better semantically.

To reiterate what @Richard JP Le Guen said, ideally you'd add these buttons using JavaScript too, so that people without JavaScript enabled will not see them, or you can offer an alternative functionality for those without JS enabled.

I prefer using <a> because the browser natively handles the click events. A clickable <div> would require javascript to handle click events.

Showing the destination url in the status bar is normally considered a good design practice. It gives the user added information where that button/link will take them.

Use the second technique; anchors (<a>) are for hyperlinks. Using an anchor for dynamic behavior affects the browser status bar (like you said) and also gives users without JavaScript the impression they can interact with the element - which they can't.

Ideally you'd also add this <div> using JavaScript, so that users with no JavaScript don't have to see it at all.

Stan! There're CSS files with thousands lines of code. That's why one more rule "cursor:pointer" is not a big problem. :)