Best way to get an imaged button?

[es_91]

Hi, how can you make buttons that have images above the text or before the text?

There must be several ways out there, but I am looking for the easiest and still well way, maybe you can help me?

Also this could be a library entry for others who search for the same question.

How to do it?

[TI-994A]

Hi, how can you make buttons that have images above the text or before the text?

Hi es_91. If I understand you correctly, this should do the trick:

Code: Select all

Enumeration 
  #MainWindow 
  #imgBtn
  #img
  #font
EndEnumeration

wFlags = #PB_Window_SystemMenu | #PB_Window_ScreenCentered
OpenWindow(#MainWindow, 0, 0, 200, 200, "ButtonImage", wFlags)
LoadImage(#img, "x:\xxx.bmp")   ;replace with your image file
LoadFont(#font, "Times New Roman", 14)
ResizeImage(#img, 150, 150)
StartDrawing(ImageOutput(#img))
  DrawingMode(#PB_2DDrawing_Transparent)
  DrawingFont(FontID(#font))
  FrontColor(RGB(255, 100, 100))
  ;BackColor(RGB(220, 220, 0))
  DrawText(40, 50, "Click Me")
StopDrawing()
ButtonImageGadget(#imgBtn, 25, 25, 150, 150, ImageID(#img))

While WaitWindowEvent() ! #PB_Event_CloseWindow : Wend

To set a background colour for the text, remove the DrawingMode(#PB_2DDrawing_Transparent) line, and reinstate the BackColor() function.

Hope it's helpful.

[Andre]

There are several example codes for this task. One you can find here: http://www.purebasic.fr/english/viewtop ... age+button

[Tenaja]

Or this, using a built in command:
http://www.purebasic.com/documentation/ ... adget.html

[TI-994A]

Or this, using a built in command:
http://www.purebasic.com/documentation/ ... adget.html

Hi Tenaja. The additional code in my example was simply for adding text to the button, as requested. But basically, it was the built-in ButtonImageGadget().

[es_91]

Two different ways with great effect! Thanks!