Groups | Blog | Home
all groups > dotnet jscript > september 2004 >

dotnet jscript : Change image of imagebutton


ruca
9/2/2004 10:16:31 AM
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
9/2/2004 11:45:00 AM
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" <avn@newsgroups.com> escreveu na mensagem
news:OMnnPRNkEHA.2500@TK2MSFTNGP09.phx.gbl...
[quoted text, click to view]

Davide Vernole [MVP]
9/2/2004 1:00:08 PM
ruca <ruuca@iol.pt> typed:
[quoted text, click to view]

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

avnrao
9/2/2004 3:34:58 PM
yes. the best way to achieve is to write a simple javascript method and
change the image url.

Av.
[quoted text, click to view]

pchartier NO[at]SPAM yahoo.com
9/30/2004 11:14:04 AM
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 ...

[quoted text, click to view]
bruce barker
9/30/2004 1:08:18 PM
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)

[quoted text, click to view]

AddThis Social Bookmark Button