Multiple Images in Image Map [SOLVED]

[drbugs]

Apologies in advance if this is a super basic question. I had a look around but I couldn't find anything that covered this specific question, and my knowledge of coding is not strong enough for me to really figure it out myself.

I want to have an image map that has multiple versions of the background when hovering over a button.
For example:

BUTTON ONE
On hover: Background becomes image 1

BUTTON TWO
On hover: Background becomes image 2

BUTTON THREE
On hover: Background becomes image 3

etc.


I tried to mess around with the image map codes on the forum, but I'm not sure how to get more than two background options. Is there a way to do it with if or conditionswitch?

[_ticlock_]

Hi, drbugs,

Do you want to change the background based on the hovered button?
For example you can do this:

Code: Select all

screen test_screen():
    default background_img = "background_base.jpg"
    add background_img
    vbox:
        textbutton "button 1":
            hovered [SetScreenVariable("background_img", "background_img_01.jpg"),
                With(Dissolve(0.5))]
            unhovered [SetScreenVariable("background_img", "background_base.jpg"),
                With(Dissolve(0.5))]
            action Return()
        textbutton "button 2":
            hovered [SetScreenVariable("background_img", "background_img_02.jpg"),
                With(Dissolve(0.5))]
            unhovered [SetScreenVariable("background_img", "background_base.jpg"),
                With(Dissolve(0.5))]
            action Return()
        textbutton "button 3":
            hovered [SetScreenVariable("background_img", "background_img_03.jpg"),
                With(Dissolve(0.5))]
            unhovered [SetScreenVariable("background_img", "background_base.jpg"),
                With(Dissolve(0.5))]
            action Return()

label start:
    call screen test_screen

[drbugs]

Thanks for the code.
To be specific, I've designed a basic image map and I want the background to change based on which hotspot you're hovering over. (I'm not sure if I explained this clearly enough)
So like this.

I gave your code a try but (I'm not sure if I'm doing something wrong here) the hover didn't work except for one time and it only worked on one button and briefly.

[_ticlock_]

The example I provided should do exactly what your link shows. I copied it from my "working" screen and mainly changed image names. I will check what could be the problem when I get to my laptop.

[_ticlock_]

I checked the code and see no problems. I made a small change to copy your example in the link (I used Solid background instead of images):

Code: Select all

screen test():
    default background_img = Solid("#a00")
    add background_img
    vbox:
        spacing 50
        button:
            add Solid("#fff", xysize = (200,50))
            hovered [SetScreenVariable("background_img", Solid("#00a")),
                With(Dissolve(0.5))]
            unhovered [SetScreenVariable("background_img", Solid("#fcc")),
                With(Dissolve(0.5))]
            action Return()
        button:
            add Solid("#fff", xysize = (200,50))
            hovered [SetScreenVariable("background_img", Solid("#cc0")),
                With(Dissolve(0.5))]
            unhovered [SetScreenVariable("background_img", Solid("#a00")),
                With(Dissolve(0.5))]
            action Return()
        button:
            add Solid("#fff", xysize = (200,50))
            hovered [SetScreenVariable("background_img", Solid("#c0c")),
                With(Dissolve(0.5))]
            unhovered [SetScreenVariable("background_img", Solid("#a00")),
                With(Dissolve(0.5))]
            action Return()

One thing, that actually can go wrong is that my code uses transition, which can potentially interfere with something else. If above does not work, try without transition:

Code: Select all

screen test():
    default background_img = Solid("#a00")
    add background_img
    vbox:
        spacing 50
        button:
            add Solid("#fff", xysize = (200,50))
            hovered SetScreenVariable("background_img", Solid("#00a"))
            unhovered SetScreenVariable("background_img", Solid("#fcc"))
            action Return()
        button:
            add Solid("#fff", xysize = (200,50))
            hovered SetScreenVariable("background_img", Solid("#cc0"))
            unhovered SetScreenVariable("background_img", Solid("#a00"))
            action Return()
        button:
            add Solid("#fff", xysize = (200,50))
            hovered SetScreenVariable("background_img", Solid("#c0c"))
            unhovered SetScreenVariable("background_img", Solid("#a00"))
            action Return()

[drbugs]

Oh, thank you! I realised from your code that I'd edited stuff I didn't need to do, so now the image switch works! The new code also helped me with getting the image buttons rather than the text buttons.
Now I'm just having trouble getting the hotspots for the button images to work... For some reason the first button aligns perfectly but the others are way off... I'll have a play around with it. Thanks again!