Ren'Py How can I change the text of a textbutton when it's hovered?

[Deleted member 4963437]

So I'm currently editing the Navigation screen and adding some cute icons to the textbuttons using image tags. But I want to change the text of a textbutton ONLY when it's hovered, and goes back to normal when it's no longer hovered.

Here's one of the buttons:

if main_menu:
    textbutton _("Start {image=gui/navi_icons/start.png}") action Start():
    hover_sound "audio/sound/mousehover.mp3"
    activate_sound "audio/sound/open.mp3"

Thing is, the icon in the image tag is white, and when the text button is hovered it turns pink. I already have a hovered version of the icon that also turns into the same colour as the text when hovered. I'm sorry if it seems confusing.

But, how can I make it so when the text button is hovered, the text changes?

 

[Bev_]

Use variable to store button's text and just change it on hovered/unhovered. For example:

default buttontext = "test"

    textbutton "[buttontext]":
        action Show("my_screen")
        hovered SetVariable('buttontext', "Something")
        unhovered SetVariable('buttontext', "test")

 

[anne O'nymous]

if main_menu:
    textbutton _("Start {image=gui/navi_icons/start.png}") action Start():
    hover_sound "audio/sound/mousehover.mp3"
    activate_sound "audio/sound/open.mp3"

Why not use the background or foreground style properties ?

style startButton is button:
    background "gui/navi_icons/start.png"
    hovered_background "gui/navi_icons/startPink.png"

You just need to add a bit of styling to position correctly the text, but nothing that can't be done.

However, following your approach it's also possible to do it. Normally this should do it:

screen whatever():
    default startImage = "gui/navi_icons/start.png"

    textbutton "start {image=[startImage]}":
        hovered SetScreenVariable( "startImage", "gui/navi_icons/startPink.png" )

 

[Deleted member 4963437]

Use variable to store button's text and just change it on hovered/unhovered. For example:

default buttontext = "test"

    textbutton "[buttontext]":
        action Show("my_screen")
        hovered SetVariable('buttontext', "Something")
        unhovered SetVariable('buttontext', "test")

Thank you! Originally I was planning to use that approach but I thought there would be a simpler way.

Why not use the background or foreground style properties ?

style startButton is button:
    background "gui/navi_icons/start.png"
    hovered_background "gui/navi_icons/startPink.png"

You just need to add a bit of styling to position correctly the text, but nothing that can't be done.

However, following your approach it's also possible to do it. Normally this should do it:

screen whatever():
    default startImage = "gui/navi_icons/start.png"

    textbutton "start {image=[startImage]}":
        hovered SetScreenVariable( "startImage", "gui/navi_icons/startPink.png" )

Hmmmm.. that's another way to put it. But that makes sense. Where would I be now without F95zone, thank you guys