Skip to content Skip to sidebar Skip to footer
Home / Asp.net / Html / Javascript / Jquery

Input Type=image - Onclick(), Will Trigger Its Event , But Not Act Well On Function In Jquery

Post a Comment
(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...

Solution 1:

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><divclass="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.

Post a Comment for "Input Type=image - Onclick(), Will Trigger Its Event , But Not Act Well On Function In Jquery"