By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,854 Members | 876 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,854 IT Pros & Developers. It's quick & easy.

Change image of imagebutton

P: n/a
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
Nov 18 '05 #1
Share this Question
Share on Google+
6 Replies


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

Av.
"ruca" <ru***@iol.pt> wrote in message
news:ut*************@TK2MSFTNGP11.phx.gbl...
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

Nov 18 '05 #2

P: n/a
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" <av*@newsgroups.com> escreveu na mensagem
news:OM**************@TK2MSFTNGP09.phx.gbl...
yes. the best way to achieve is to write a simple javascript method and
change the image url.

Av.
"ruca" <ru***@iol.pt> wrote in message
news:ut*************@TK2MSFTNGP11.phx.gbl...
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


Nov 18 '05 #3

P: n/a
ruca <ru***@iol.pt> 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
Nov 18 '05 #4

P: n/a
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]" <da****@online.knodev.com> wrote in message news:<e2**************@TK2MSFTNGP15.phx.gbl>...
ruca <ru***@iol.pt> 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

Nov 18 '05 #5

P: n/a
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
Nov 18 '05 #6

P: n/a
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" <pc*******@yahoo.com> wrote in message
news:87**************************@posting.google.c om...
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]" <da****@online.knodev.com> wrote in message

news:<e2**************@TK2MSFTNGP15.phx.gbl>...
ruca <ru***@iol.pt> 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

Nov 18 '05 #7

This discussion thread is closed

Replies have been disabled for this discussion.