Member Avatar for Thropian

I started into a project in Python,Tkinter. I have a button that I have two images for. I know buttons include the "-relief" option so I can get rid of the border. Now I'm trying to get rid of the click animation border, and have the image on the button change when clicked.

Thanks in advanced.

  • 3 Contributors
  • 3 Replies
  • 7K Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by floatingshed

Dani AI

Generated

If you want to keep using a real Tk button but hide the pressed/hover visuals and swap images on mouse down/up, you can get very close to a flat, image-only control by turning off the focus ring and hover relief, and binding press/release to change the displayed image. Key options to tame the visuals are highlightthickness=0 (no focus ring), relief='flat', overrelief='flat', takefocus=0, and setting activebackground the same as background to avoid a color flash on press. Remember to keep a Python reference to your PhotoImage objects or they will be garbage collected; see the note under Images in the Python docs (docs.python.org).

Example pattern:

btn = tk.Button(root,
                image=img_up,
                relief='flat',
                overrelief='flat',
                borderwidth=0,
                highlightthickness=0,
                background=bg,
                activebackground=bg,
                takefocus=0)

def on_press(e): btn.config(image=img_down)
def on_release(e): btn.config(image=img_up)  # optionally call your command here

btn.bind('<ButtonPress-1>', on_press)
btn.bind('<ButtonRelease-1>', on_release)
btn.image_up = img_up
btn.image_down = img_down

On themed widgets, a ttk.Button with the Toolbutton style often renders flat by default and avoids the native click animation: ttk.Button(root, image=img_up, style='Toolbutton'). You can further customize via styles; see the Tk manpages for button and ttk::button. Note that exact pressed/hover behavior can differ across platforms and themes.

Recommended Answers

All 3 Replies

Member Avatar for Thropian

So I was struck by inspiration moments ago. I decided to replace buttons with canvases bound with a <Button-1> event to imitate a button.

def NewGame(event):
    NewButton.place_forget()
    LoadButton.place_forget()
    CreditsButton.place_forget()
    New()

def ClickNew(event):
    for x in NewButton.find_all():
        NewButton.delete(x)
        ImageNew = ImageTk.PhotoImage(Image.open("New Click.PNG"))
    NewButton.create_image(0,0,anchor=NW,image=ImageNew)
    NewButton.image = ImageNew


ImageNew = ImageTk.PhotoImage(Image.open("New.PNG"))
NewButton = Canvas(canvas, width = 144, height = 50)
NewButton.place(x=50,y=175)
NewButton.create_image(0,0,anchor=NW,image=ImageNew)
NewButton.image = ImageNew
NewButton.bind("<Button-1>",ClickNew)
NewButton.bind("<ButtonRelease-1>",NewGame)

Which works to allow an image change on click. If there is a way for this to be done with a button, I would still be interested. If not, then this code can still help others.

Edited by Thropian because: n/a
Member Avatar for vegaseat

Just one idea how you do this ...

# toggle a Tkinter button up/down 
# using images and no button border
# tested with Python 2.7 and Python 3.2 by vegaseat

try:
    # Python2
    import Tkinter as tk
except ImportError:
    # Python3
    import tkinter as tk

def action(toggle=[True]):
    """
    toggle the button with up/down images,
    using a list element as static variable
    """
    if toggle[0]:
        button.config(image=image_down)
        toggle[0] = False
    else:
        button.config(image=image_up)
        toggle[0] = True
    

root = tk.Tk()
root.title("up/down button no border")

# pick GIF images you have in the working directory
# or give full path
image_up = tk.PhotoImage(file='up.gif')
image_down = tk.PhotoImage(file='down.gif')

# create a button to display the image
# use bd or borderwidth zero for no border
# start with button image up
button = tk.Button(root, image=image_up, bd=0, command=action)
# position the widgets
button.grid(row=1, column=1, padx=130)

root.mainloop()
down.gif 3.25 KB up.gif 3.24 KB
Member Avatar for floatingshed

ooh, this looks fun. Now how would it be in wx...?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.