Change image of imagebutton

Discussion in 'ASP .Net' started by ruca, Sep 2, 2004.

  1. ruca

    ruca Guest

    Hi gurus,
    I have a imagebutton in my WebForm, and I want that when I click (mouse
    down) on her the imagebutton change image and when I "unclick" (mouse up)
    change to the original image.
    Basically I want to know how can I have the mousedown and mouseup buttons
    events. I think that I have to do this in JavaScript.

    Can you help me on this?



    --
    Programming ASP.NET with VB.NET
    Thank's (if you try to help me)
    Hope this help you (if I try to help you)
    ruca
    ruca, Sep 2, 2004
    #1
    1. Advertising

  2. ruca

    avnrao Guest

    yes. the best way to achieve is to write a simple javascript method and
    change the image url.

    Av.
    "ruca" <> wrote in message
    news:...
    > Hi gurus,
    > I have a imagebutton in my WebForm, and I want that when I click (mouse
    > down) on her the imagebutton change image and when I "unclick" (mouse up)
    > change to the original image.
    > Basically I want to know how can I have the mousedown and mouseup buttons
    > events. I think that I have to do this in JavaScript.
    >
    > Can you help me on this?
    >
    >
    >
    > --
    > Programming ASP.NET with VB.NET
    > Thank's (if you try to help me)
    > Hope this help you (if I try to help you)
    > ruca
    >
    >
    avnrao, Sep 2, 2004
    #2
    1. Advertising

  3. ruca

    ruca Guest

    Right. My question is how??????????????????????????????????
    JavaScript it's not my strong....


    --
    Programming ASP.NET with VB.NET
    Thank's (if you try to help me)
    Hope this help you (if I try to help you)
    ruca

    "avnrao" <> escreveu na mensagem
    news:...
    > yes. the best way to achieve is to write a simple javascript method and
    > change the image url.
    >
    > Av.
    > "ruca" <> wrote in message
    > news:...
    > > Hi gurus,
    > > I have a imagebutton in my WebForm, and I want that when I click (mouse
    > > down) on her the imagebutton change image and when I "unclick" (mouse

    up)
    > > change to the original image.
    > > Basically I want to know how can I have the mousedown and mouseup

    buttons
    > > events. I think that I have to do this in JavaScript.
    > >
    > > Can you help me on this?
    > >
    > >
    > >
    > > --
    > > Programming ASP.NET with VB.NET
    > > Thank's (if you try to help me)
    > > Hope this help you (if I try to help you)
    > > ruca
    > >
    > >

    >
    >
    ruca, Sep 2, 2004
    #3
  4. ruca <> typed:
    > Right. My question is how??????????????????????????????????
    > JavaScript it's not my strong....


    Put this in your aspx page

    <script language='javascript'>
    <!--
    function EvImageOverChange(name, direction)
    {
    switch(direction)
    {
    case 'in':
    name.src = "image/OverImage.gif";
    break;
    case 'out':
    name.src = "image/InitialImage.gif";
    break;
    }
    }
    //-->
    </script>

    in the code behind insert this in the Page load method:

    if(!IsPostBack)
    {
    myImageButton.ImageUrl = "image/InitialImage.gif";
    myImageButton.Attributes["OnMouseOver"] =
    "javascript:EvImageOverChange(this, 'in');";
    myImageButton.Attributes["OnMouseOut"] =
    "javascript:EvImageOverChange(this, 'out');";
    }

    where myImageButton is your WebControls of type ImageButton,
    InitialImage.gif is you initial image and OverImage.gif is the image
    displayed when the OnMouseOver event is fired.

    HTH

    --
    Davide Vernole
    MVP ASP/ASP.NET
    Microsoft Certified Solution Developer
    Davide Vernole [MVP], Sep 2, 2004
    #4
  5. David,

    What I need to know is how to change the image on the imagebutton
    to simulate the button being pressed down just before the postback
    event is fired. I used the script below to change the image on the
    MouseDown event (client side), but instead of changing the image to
    the "button presed" image, the button disappeared just before the
    postback event was fired. Why would that happen?? Or is there an
    order to the events firing that I'm not aware of?

    Any assistance would be gratefully appreciated.

    Prescott ...

    "Davide Vernole [MVP]" <> wrote in message news:<>...
    > ruca <> typed:
    > > Right. My question is how??????????????????????????????????
    > > JavaScript it's not my strong....

    >
    > Put this in your aspx page
    >
    > <script language='javascript'>
    > <!--
    > function EvImageOverChange(name, direction)
    > {
    > switch(direction)
    > {
    > case 'in':
    > name.src = "image/OverImage.gif";
    > break;
    > case 'out':
    > name.src = "image/InitialImage.gif";
    > break;
    > }
    > }
    > //-->
    > </script>
    >
    > in the code behind insert this in the Page load method:
    >
    > if(!IsPostBack)
    > {
    > myImageButton.ImageUrl = "image/InitialImage.gif";
    > myImageButton.Attributes["OnMouseOver"] =
    > "javascript:EvImageOverChange(this, 'in');";
    > myImageButton.Attributes["OnMouseOut"] =
    > "javascript:EvImageOverChange(this, 'out');";
    > }
    >
    > where myImageButton is your WebControls of type ImageButton,
    > InitialImage.gif is you initial image and OverImage.gif is the image
    > displayed when the OnMouseOver event is fired.
    >
    > HTH
    Prescott Chartier, Sep 30, 2004
    #5
  6. ruca

    Alex Homer Guest

    It might be that IE stops loading images once a new page request (such as a
    postback) occurs. You could use the interval timer in client-side code to
    cause a delay before the postback by returning false to prevent the form
    being submitted and then calling the submit method in your code. But this
    will break the page if the user has scripting disabled or not supported. You
    might find some useful client-side scripting tricks like this at:
    http://www.daveandal.net/books/6744/samples.aspx
    Alex Homer, Sep 30, 2004
    #6
  7. ruca

    bruce barker Guest

    what you are trying to do is difficult.

    when you set src="images/buttonPressed.gif", you are telling the browser to
    download a new image are change the display of the object. when the object
    is a imagebutton, the onclick is firing a postback, which is also a download
    request. becuase the main page is being replaced, the gif download is
    canceled.

    to do what you want if you really want to:

    1) precache the "button pressed image"

    <script>
    var imgButtonPressed = new Image ();
    imgButtonPressed.src = "images/buttonPressed.gif";
    </script>

    2) on the image buttons click cancel the postback, change the image and
    queue up a new submit.

    <script>
    function onClick(e)
    {
    if (e.src != img.src) {
    e.src = img.src; // use cached image
    var s = "document.getElementById('" + e.id + "').click()";
    window.setTimeout(s,10); // give enough time to display
    image before real postback
    return false;
    }
    return true;
    }
    </script>

    3) in the code behind, add the onclick handler

    button.Attributes.Add("onclick","return onClick(this);")

    -- bruce (sqlwork.com)

    "Prescott Chartier" <> wrote in message
    news:...
    > David,
    >
    > What I need to know is how to change the image on the imagebutton
    > to simulate the button being pressed down just before the postback
    > event is fired. I used the script below to change the image on the
    > MouseDown event (client side), but instead of changing the image to
    > the "button presed" image, the button disappeared just before the
    > postback event was fired. Why would that happen?? Or is there an
    > order to the events firing that I'm not aware of?
    >
    > Any assistance would be gratefully appreciated.
    >
    > Prescott ...
    >
    > "Davide Vernole [MVP]" <> wrote in message

    news:<>...
    > > ruca <> typed:
    > > > Right. My question is how??????????????????????????????????
    > > > JavaScript it's not my strong....

    > >
    > > Put this in your aspx page
    > >
    > > <script language='javascript'>
    > > <!--
    > > function EvImageOverChange(name, direction)
    > > {
    > > switch(direction)
    > > {
    > > case 'in':
    > > name.src = "image/OverImage.gif";
    > > break;
    > > case 'out':
    > > name.src = "image/InitialImage.gif";
    > > break;
    > > }
    > > }
    > > //-->
    > > </script>
    > >
    > > in the code behind insert this in the Page load method:
    > >
    > > if(!IsPostBack)
    > > {
    > > myImageButton.ImageUrl = "image/InitialImage.gif";
    > > myImageButton.Attributes["OnMouseOver"] =
    > > "javascript:EvImageOverChange(this, 'in');";
    > > myImageButton.Attributes["OnMouseOut"] =
    > > "javascript:EvImageOverChange(this, 'out');";
    > > }
    > >
    > > where myImageButton is your WebControls of type ImageButton,
    > > InitialImage.gif is you initial image and OverImage.gif is the image
    > > displayed when the OnMouseOver event is fired.
    > >
    > > HTH
    bruce barker, Sep 30, 2004
    #7
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. RobertH
    Replies:
    3
    Views:
    4,763
    RobertH
    Feb 17, 2004
  2. Andy G
    Replies:
    4
    Views:
    3,299
  3. fabrice
    Replies:
    1
    Views:
    861
    Cowboy \(Gregory A. Beamer\)
    Sep 21, 2006
  4. jef
    Replies:
    2
    Views:
    237
  5. ruca

    Change image of imagebutton

    ruca, Sep 2, 2004, in forum: ASP .Net Web Controls
    Replies:
    5
    Views:
    214
    bruce barker
    Sep 30, 2004
Loading...

Share This Page