Different status in a picture button

Targets Web
1

Hi everybody,

I am trying to do a button with three different status (normal, hover and pressed) in my web project but I don’t want the simple standard button. I have three pictures from the same arrow image (in gray, blue and red color).

The name to gray image is: Arrowimage_gray
The name to red image is: Arrowimage_red
The name to blue image is: Arrowimage_blue

By default I have inserted ‘Arrowimage_gray’ as an image well (called ‘ArrowButton’) and then I have included this code into the ‘Gotfocus’ event:

ArrowButton.Picture = Arrowimage_blue

and into the ‘MouseDown’ event:

ArrowButton.Picture = Arrowimage_red

When I put the mouse over the Arrowbutton I don’t get any change in the image and when I click it, the color changes to red but it’s static, it means, I want that it changes only the time that the button is pressed and after recover the gray color. Where is the problem? Is this the best way to get different status in a picture?

Could anyone help me to get different status in my button?

Thank you very much,
Sergio

2

[quote=203883:@Sergio Ciordia]Hi everybody,

I am trying to do a button with three different status (normal, hover and pressed) in my web project but I don’t want the simple standard button. I have three pictures from the same arrow image (in gray, blue and red color).

The name to gray image is: Arrowimage_gray
The name to red image is: Arrowimage_red
The name to blue image is: Arrowimage_blue

By default I have inserted ‘Arrowimage_gray’ as an image well (called ‘ArrowButton’) and then I have included this code into the ‘Gotfocus’ event:

ArrowButton.Picture = Arrowimage_blue

and into the ‘MouseDown’ event:

ArrowButton.Picture = Arrowimage_red

When I put the mouse over the Arrowbutton I don’t get any change in the image and when I click it, the color changes to red but it’s static, it means, I want that it changes only the time that the button is pressed and after recover the gray color. Where is the problem? Is this the best way to get different status in a picture?

Could anyone help me to get different status in my button?

Thank you very much,
Sergio[/quote]

You may want to try using a WebCanvas instead of an ImageWell, then have a WebPage property like Button1State as Integer so in the WebCanvas Paint event, you display the image corresponding to the state.

Something like (not tested)

Select case Button1State case 0 g.drawpicture(Arrowimage_gray) case 1 g.drawpicture(Arrowimage_red) case 2 g.drawpicture(Arrowimage_blue) end select

Then in Canvas1.MouseDown :

Button1State = 1 Me.Invalidate

Same principle for MouseUp, MouseEnter and MouseExit for hover.

It should be much more responsive.

If that does not work, JavaScript maybe in order.

3

Thank you very much Michel.

It works perfectly with the three states but I needed to modify your code a little bit in the Paint event:

Select case Button1State case 0 g.drawpicture(Arrowimage_gray,0,0) case 1 g.drawpicture(Arrowimage_red,0,0) case 2 g.drawpicture(Arrowimage_blue,0,0) end select

That’s perfect.

Do you think that it’s possible to get the same states in the buttons from a toolbar?

Sergio

4

[quote=203955:@Sergio Ciordia]Thank you very much Michel.

It works perfectly with the three states but I needed to modify your code a little bit in the Paint event:[/quote]

Indeed, I forgot the location of the picture. Sorry.

It may be possible to change the WebToolBarButton icons the same way but you won’t have MouseEnter/Exit or Keydown. That will require using MouseMove and the WebToolBar Keydown, if all that works. I would probably use a WebCanvas over the WebToolbar instead.

5

Ok, I supposed your answer. Thanks.

Sergio