Skip to content Skip to sidebar Skip to footer

How To Make Buttons Appear Behind A Background, Or Make The Buttons Background Transparent?

(Note: The buttons with borders are part of the background) I would like to place the real buttons behind the image so it would like i'm pressing the button in the background, how

Solution 1:

Question: let the user click directly on the background

  1. Define a class object inherited from tk.Canvas

    classMenu(tk.Canvas):
        def__init__(self, parent, image, command, show_areas=False):
            """
            Init a Canvas object, displaying a image
            Bind the Mouse click to a function
            Init a dict to hold the added clickable areas
    
            :param parent: The parent widget
            :param image: The image object
            :param command: The callback command to handle area clicks
            :param show_areas: For debug/trace purpose. If 'True'show the clickable areas.
            """super().__init__(parent)
            # Feed TKinter the image
            self._image = image
            self.create_image(0, 0, image=self._image, anchor='nw')
    
            self.callback = command
            self.bind('<Button-1>', self.Button_1_func)
    
            self.show_areas = show_areas
            self.areas = {}
    
  2. The Mouse-Click-Handler function. Search for a matching area and call the .callback function with the tag

    def Button_1_func(self, event):
            for tag, (x, y, x2, y2) in self.areas.items():
                ifevent.x inrange(x, x2) andevent.y inrange(y, y2):
                    event.tag = tag
                    self.callback(event)
                    return'break'
  3. Add a new clickable area with given tag and computed geometry. 15 * 10 computes the area width5 * 10 computes the area height If self.show_areas is True, create a rectangle with the geometry.

    defadd_area(self, tag, coord):
            self.areas[tag] = *coord, (coord[0] + (15 * 10)) + 1, (coord[1] + (5 * 10)) + 1ifself.show_areas:self.create_rectangle(self.areas[tag])
    

Usage:

classApp(tk.Tk):
    def__init__(self):
        super().__init__()

        # Displays as background_image what's in the file
        self.menu = Menu(self,
                         image=tk.PhotoImage(file="Mainmenu.png"),
                         command=self.command,
                         show_areas=True)
        self.menu.place(x=0, y=0, relwidth=1, relheight=1)

        for tag, coords in [('Play', (300, 240)), 
                            ('Settings', (480, 240)), 
                            ('Quit', (390, 300))]:
            self.menu.add_area(tag, coords)

    defshow_frame(self, key):
        # Simulating controller.show_frameprint('show_frame({})'.format(key))

    defcommand(self, event):
        if event.tag in ['Play', 'Settings']:
            self.show_frame(event.tag)

        if event.tag == 'Quit':
            self.quit()

if __name__ == "__main__":
    App().mainloop()

Tested with Python: 3.5

Post a Comment for "How To Make Buttons Appear Behind A Background, Or Make The Buttons Background Transparent?"