How to change the image of a button with the image used to hover the button in Python?

Question

what if I clicked on the button and I wanted to change the button's image by the image I used to Hover? something like the button will be changed to imageHover since its is clicked. Once clicked, the image of the button should be the imageHover. It is like an indication that among all the buttons, it is the button clicked already. Help :( tysm

def choices(x, y, w, h, image, imageOn, action=None):
    mouse = pygame.mouse.get_pos()
    click = pygame.mouse.get_pressed() #py collects left middle right button; (1,0,0) -leftclick; (0,0,1)rightclick

    rect = pygame.Rect(x, y, w, h)
    on_button = rect.collidepoint(mouse)

    if on_button: #panghover
        screen.blit(imageOn, imageOn.get_rect(center=rect.center))

    else:
        screen.blit(image, image.get_rect(center=rect.center))

    if on_button:
        if click[0] == 1 and action!= None:
            if action == "A":
                pygame.quit()
                quit()
            elif action == "B":
                pygame.quit()
                quit()
            elif action == "C":
                pygame.quit()
                quit()

q1BG = pygame.image.load(os.path.join("Images/Quiz", "question1.png"))
q1A = pygame.image.load(os.path.join("Images/Quiz", "q1A.png"))
q1AHover = pygame.image.load(os.path.join("Images/Quiz", "q1Ahover.png"))
q1B = pygame.image.load(os.path.join("Images/Quiz", "q1B.png"))
q1BHover = pygame.image.load(os.path.join("Images/Quiz", "q1Bhover.png"))
q1C = pygame.image.load(os.path.join("Images/Quiz", "q1C.png"))
q1CHover = pygame.image.load(os.path.join("Images/Quiz", "q1Chover.png"))
submit = pygame.image.load(os.path.join("Images/Quiz", "submit.png"))
submitHover = pygame.image.load(os.path.join("Images/Quiz", "submithover.png"))

while True:
            for event in pygame.event.get():
                if event.type == pygame.QUIT:
                    pygame.quit()
                    quit()

            screen.blit(q1BG, [0, 0])
            choices(370, 225, 300, 50, q1A, q1AHover, "A") #x,y, width, height
            choices(370, 285, 300, 50, q1B, q1BHover, "B")
            choices(370, 350, 300, 50, q1C, q1CHover, "C")
            choices(370, 450, 300, 50, submit, submitHover, "submit")
            pygame.display.update()

score 1 · Answer 1 · answered Nov 25 '20 at 18:53

Implement a button class. The class has a clicked attribute that indicates whether the button was clicked. The class has an update method that gets the list of events and sets the click status of the button. The draw method draws the button dependent on the state of clicked and on_button. Actually you can decide which image is drawn when the mouee hovers over the button. Either if self.clicked or on_button: or if self.clicked: (I don't know what you expect here):

class Button():
    def __init__(self, x, y, w, h, image, imageOn, action=None):
        self.rect = pygame.Rect(x, y, w, h)
        self.image = image
        self.imageOn = imageOn
        self.action = action
        self.clicked = False

    def update(self, event_list):
        for event in event_list:
            if event.type == pygame.MOUSEBUTTONDOWN:
                if self.rect.collidepoint(event.pos):
                    self.clicked = not self.clicked

    def draw(self, surf):
        on_button = self.rect.collidepoint(pygame.mouse.get_pos())

        if self.clicked or on_button:
        # if self.clicked:
            surf.blit(self.imageOn, self.imageOn.get_rect(center=self.rect.center))
        else:
            surf.blit(self.image, self.image.get_rect(center=self.rect.center))

Construct the Button Instance Objects before the application loop and create a list of buttons. Use for loops to update and draw the buttons in the application loop:

buttonA = Button(370, 225, 300, 50, q1A, q1AHover, "A")
buttonB = Button(370, 285, 300, 50, q1B, q1BHover, "B")
buttonC = Button(370, 350, 300, 50, q1C, q1CHover, "C")
buttonSubmit = Button(370, 450, 300, 50, submit, submitHover, "submit")

buttons = [buttonA, buttonB, buttonC, buttonSubmit]

while True:
    event_list = pygame.event.get()
    for event in pygame.event.get():
        if event.type == pygame.QUIT:
            pygame.quit()
            quit()

    for b in buttons:
        b.update(event_list)

    screen.blit(q1BG, [0, 0])
    for b in buttons:
        b.draw(screen)
    pygame.display.update()

How to change the image of a button with the image used to hover the button in Python?

1 Answers1