Change image of imagebutton

[ruca]

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?

 

[avnrao]

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

Av.

 

[ruca]

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

 

[Davide Vernole [MVP]]

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]

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 ...

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

 

[Alex Homer]

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

 

[bruce barker]

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)

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]" <[email protected]> wrote in message

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