3

(I think this could be two posts - 2 questions.. so if you'll comment on it... I will separate those)

the main issue is acually:

how could I set an image-background for a button... easy & properly ?

I think that now I could be sure about these facts:

as I had a "little" problem with setting image as button-background , ...I thought, ok, if it's difficult to set <input type='button'> with image-background, why not instead , just set onclick event on a <input type='image'>!

and I was right(...almost), cause yes, to set click-event on image type is easy, also, to set src ..instead of background-image for button... at least for me, it is.

the problem is, in current project), using a jQuery-UI dialog - ok, cancel,

seems that the problem is that image-type , Posts back (?!), so dialog disappears

and button does not cause this flaw.

I tried to debug it with a break-point, in vs2010 and it both ok with a click event as they both get to the point of "function entry" ... so with the image type ... i could only notes, as i could see the <- Back button, toggles from disabled to be clickable, so it means it did post back.

and that does not happen with a button , as you hover over the button nothing happans , and with image you could see a link in status bar .

so there is a difference (a real one), between button-"convert" into image, than an image turned into a "button" (attaching it with a Click() event) ,

so what i would like to know , is: (only if I am allowed this time to use this post for both answers as they realy relate)

why does image post back? could i disable this action? ...it is not a server control. is that something you should know, and that suppose to happen ?

again if it is off-topic i would move this question, and i do need a propper way to set the background image for a button unless there's a workaround for it's behavior.

LoneXcoder
  • 2,121
  • 6
  • 38
  • 76
  • 1
    Input elements with type "image" work just like submit buttons, but were designed for server-side image maps and also pass the x/y click coordinates to the server. – bfavaretto Dec 28 '12 at 02:47
  • Also, if you don't care for older browsers, you can just add a background image to a ` – bfavaretto Dec 28 '12 at 02:52
  • @bfavaretto i will start from now thanks for commenting it and for that information and about x,y sent to server via image , clients click...nice ah...i now remember old school image maps... i remeber it was cool when it was out (or atleast for my knowlege) more than 10 years ago now i can connect it to that means it is by default ment to a sort of a link – LoneXcoder Dec 28 '12 at 04:35

1 Answers1

2

I'm not sure why the image type input element behaves differently than the button type, but if I were you I would avoid it all together. If you are looking to customize your button (which it appears you are) I would suggest using a div and control the user interaction via jquery/javascript.

Demo: http://jsfiddle.net/jrb9249/BvTD5/

HTML:

<body>
    <div class="div_button">
        <p>Click Me!</p>
    </div>
</body>

Javascript:

$('.div_button').click(function(){
    alert('Run a postback via JS');
});

CSS:

.div_button
{
    border: solid 1px gray;
    width:80px;
    height:25px;
    background:#A3A3A3;
    text-align:center;
    margin:0 auto;
    margin-top:50px;
}

.div_button:hover
{
    border: solid 1px blue;
    background:#A1A1A1;
    cursor:pointer;
}

To add some finishing touches to complete the button look, just add some rounded corners using the jquery rounded corners plugin found here. And if you need to do a post back with this control (it doesn't look like an asp.net control so I don't think that is what you are doing) you can use the __Postback technique described here.

I hope this helps, good luck with your site.

Update: Since this post I've started enclosing my div tags within an <a> tag to create a hyperlink out of the div. You can then apply custom click events to the <a> element and have greater control over the button you created.

Community
  • 1
  • 1
Ross Brasseaux
  • 3,879
  • 1
  • 28
  • 48
  • forgot to thank you . that's how i aventualy made it passed this stage of progress through my current project realy cool way to over come that issue Thaks mate! – LoneXcoder Dec 28 '12 at 21:19