How to change the imagebutton image onmouseover event in asp.net?

Question

How to change the imagebutton image onmouseover event in asp.net? ImageUrl=~/Images/calculator1.jpg Width=115px onmouseover=this.src='http://Images/calculator2.jpg' /> this is not working

Deepak Bhatia · Answer

hi Vikas Just add a CSS class in your project .ImageStyle { background-image : url(usrnsme_icon.gif) ; background-position : center ; background-repeat : no-repeat ; } .ImageStyle:hover { background-image : url(pswd_icon.gif) ; } After this add this line in aspx class asp : ImageButton ID =imgBtn runat =server CssClass =ImageStyle Width =17 Height =16 OnClick =imgBtn_Click /> Remember height and width should be equal to height and width of image to be set.

Deepak Bhatia · Answer

This will be actual code for your images as mentioned in your post .ImageStyle { background-image : url(calculator1.jpg) ; background-position : center ; background-repeat : no-repeat ; } .ImageStyle:hover { background-image : url(calculator2.jpg) ; } Rememeber to place this two images in CSS folder i.e. App_Themes folder where CSS class has been placed.

Vikas Ahlawat · Answer

ok i will check what is my mistake . thanks for your replys

Deepak Bhatia · Answer

Vikas I would like to suggest you never forget to mark answer as accepted if it helped you to solve your problem. This way you help the forums users to gain points and they will always be interested in helping you furthur in other problems too. Always mark answer as accepted if it helped you whether it's posted by any of the user on this coummunity.

Deepak Bhatia · Answer

Thanks for your replies too.

Deepak Bhatia · Answer

Vikas I have copied your code ans pasted in a new page but I can not see any  Submit Query or any string which is display on froground on image

Vikas Ahlawat · Answer

Submit Query it is simple string which is display on froground on image

Deepak Bhatia · Answer

Hi I am unable to understand what you mean by show Submit Query on images

Deepak Bhatia · Answer

Vikas You made a very small mistake just remove the tild sign and / from images i.e. .ImageStyle { background-image: url(Images/calculator3.jpg); background-position: center; background-repeat: no-repeat; } .ImageStyle:hover { background-image: url(Images/calculator2.jpg); } REMEMBER: To change the width and height attribute to your calculator image size in tag

Vikas Ahlawat · Answer

No it not giving error. my url was wrong background-image: url(~/Images/calculator2.jpg); i do this background-image: url(Images/calculator3.jpg); But the it images size is very small and not changing when i change width and heigh of image. and its also show Submit Query on images

Deepak Bhatia · Answer

Vikas Is it giving compilation i.e. error while building.

Vikas Ahlawat · Answer

Hi Deepak I apply your code but it not working Untitled Page .ImageStyle { background-image: url(~/Images/calculator3.jpg); background-position: center; background-repeat: no-repeat; } .ImageStyle:hover { background-image: url(~/Images/calculator2.jpg); } what wrong in it. this page output is Submit query