Showing Image when Hovering over Hotspot [Solved]

[Exiscoming]

Quick rundown. I'm creating a game where you have a option menu done in an imagemap.
When you hover over one of the options, it light's up and you can click it. However....

I want a picture on the side to change whenever someone hovers over the option.
Example:

Code: Select all

    imagemap:
        ground "UI/ForgeMap.png"
        hover "UI/ForgeMap-hover.png"
       
        hotspot (30, 195, 175, 60) clicked Jump("icecream")
        hotspot (30, 255, 175, 60) clicked Jump("hamburger")
        hotspot (30, 255, 175, 60) clicked Jump("cake")

Now this code works well on the buttons themselves (they light up when you hover over them.)
But how can I make the image on the side change depending on which button I hover over?

[trooper6]

It looks like what you'd do is add the hovered property and an action to your hotspots.
hovered is mentioned here: http://www.renpy.org/doc/html/screens.html#hotspot

This is an examples of hovered in action (albeit for tooltips):
http://www.renpy.org/doc/html/screen_ac ... ml#Tooltip

What action should you attach to the hovered? Hm I don't know...maybe Show or Show Transient? You'd then put the image you want to show up on the side on a screen then all should be well.
http://www.renpy.org/doc/html/screen_actions.html#Show

I haven't tested it, of course, but that would be my guess based on a little bit of searching the documentation.

[Exiscoming]

Thanks. I'm sorta new to coding so it's gonna take some time before I understand this.
I figured if I can give a hotspot the "clicked" property, I can also give it the "hovered"

hotspot (30, 195, 175, 60) clicked Jump("cellsTutorial") hovered show("UI/models/emotions/angry.png") at Position (xpos = 610, ypos = 265)
Wouldn't this work?

[trooper6]

Try it out and see how it works!

[Exiscoming]

haha, it didn't work. I thought I was being clever. =)
Still struggling with this.

[trooper6]

What error did you get?

The tooltip example I linked to has it organized like so:

Code: Select all

hotspot (30, 195, 175, 60):
    clicked Jump("cellsTutorial") 
    hovered show("UI/models/emotions/angry.png") at Position (xpos = 610, ypos = 265)

But I think one of the reasons what you did isn't working is
a) "show" as an Action should be capitalized
b) if you looked at the documentation you'd notice that Show doesn't show images, it shows screens. So you need to create a screen with your image on it placed where you want to place it and then Show that screen.

[Exiscoming]

Hey again! Sorry for the late reply. Still working on it. It's not working. Something really odd is happening.
http://i.imgur.com/avD6vqg.png

As soon as I add the Hovered command to it. This happeneds. It shows the first button at the right. (doesn't matter what I picture I try displaying at the right, it always shows the Detention area button).
As soon as I hover over it. I get this:

http://i.imgur.com/6norxlC.png

[trooper6]

It is hard to see what might be wrong without seeing your code. If you'd post your code, and all that is relevant, including where you declare and define the referred to elements, it might be easier to see what's going on.

[Exiscoming]

Hm, there's not much more to it than this.

I'll PM you the code. Maybe you see something I can't.

[trooper6]

Okay, I spent the last few hours teaching myself exactly how to do what you wanted. I did this by looking at the cookbook and the documentation and then experimenting. I want to emphasize that before this moment I had never made an image map before and my image button experience was limited. I mention this for two reasons...1) if I can do this through trial and error and reading the documentation carefully, other people can also do it, and 2) one of the more expert people might know of a better way to do some of the things I did...but it all works.

So I have created a project that does exactly what you want. It does it in two different ways. The first with image maps, the second with image buttons.
If I were doing this for myself, I'd probably make a few changes...but this does what you want. If I had more time to mess with this, I'd probably make one big screen that held all of the elements...but I went with the quickest way I thought of.

Here is the code and I'm also attaching the project so you can play with it.

Code: Select all

# You can place the script of your game in this file.

# Declare images below this line, using the image statement.
# eg. image eileen happy = "eileen_happy.png"
image lydiaP = "images/LydiaPort.jpg"
image dianaP = "images/DianaPort.jpg"
image julietP = "images/JulietPort.jpg"

# Declare characters used by this game.
define e = Character('Eileen', color="#c8ffc8")

screen control_map():
    frame:
        xalign 0.5
        yalign 0.7
        textbutton "Gallery" action [If(renpy.get_screen("button_map"), Hide("button_map"), Show("button_map")),
            If(renpy.get_screen("portrait"), Hide("portrait"), Show("portrait", who="None"))]
        
screen control_buttons():
    frame:
        xalign 0.5
        yalign 0.7
        textbutton "Gallery" action [If(renpy.get_screen("button_images"), Hide("button_images"), Show("button_images")),
            If(renpy.get_screen("portrait"), Hide("portrait"), Show("portrait", who="None"))]
    
screen button_map():
    imagemap:
        auto "images/ButtonMap_%s.png"
        
        hotspot (51, 41, 201, 52) action Show("portrait", who= "diana")
        hotspot (51, 141, 201, 52) action Show("portrait", who="lydia")
        hotspot (51, 249, 201, 52) action Show("portrait", who="juliet")
        
screen button_images():
    vbox:
        imagebutton:
            auto "images/DianaB_%s.png" 
            xpos 50 ypos 50 
            focus_mask True 
            activate_sound 'click.wav'
            action Show("portrait", who= "diana")
            at butt_eff
        imagebutton: 
            auto "images/LydiaB_%s.png" 
            xpos 50 ypos 100 
            focus_mask True
            activate_sound 'click.wav'
            action Show("portrait", who="lydia")
            at butt_eff
        imagebutton: 
            auto "images/JulietB_%s.png" 
            xpos 50 ypos 150 
            focus_mask True
            activate_sound 'click.wav'
            action Show("portrait", who="juliet")
            at butt_eff
        
screen portrait(who):
    frame:
        background "#000000"
        xalign 1.0
        vbox:
            if who == "diana":
                add "dianaP"
                text "Diana is the science officer."
            if who == "lydia":
                add "lydiaP"
                text "Lydia is the security officer."
            if who == "juliet":
                add "julietP"
                text "Juliet leads the resistence." 
            if who == "None":
                null height 400
                
init -2:
    transform butt_eff:
        on idle:
            easein 0.3 zoom 1.0
        on hover:
            easein 0.3 zoom 1.05

            
# The game starts here.
label start:
    scene black
    show screen control_map()
    
    "Click on the gallery button!"
    "Here we are using Image maps to show different images. Try out the image map buttons!"
    "If you are done click the gallery button again to get rid of the image map."
    
    if renpy.get_screen("control_map"):                                       
        hide screen control_map
        hide screen button_map
        hide screen portrait
    show screen control_buttons()
    
    "Now let's try Image buttons! Click on the gallery button!"
    "Here we are using Image buttons. Try them out a bit."
    "If you are done click the gallery button again to get rid of the image buttons."
    
    if renpy.get_screen("button_images"):  
        hide screen button_images
        hide screen portrait
    hide screen control_buttons
    "Okay, the game is over"

    return

[Exiscoming]

Hey man, thanks for all the effort! This'll come in handy in the future!
One thing though. You're still required to click the button to show the picture. I was hoping to have the image show up when you hovered over the button, and have it disappear again when you stop hovering over it.

[trooper6]

I'm at a cafe working, so I don't have access to my computer, but the answer to your question is in the documentation. If you look at the Image Button documentation here: http://www.renpy.org/doc/html/screens.html#imagebutton

You'll notice that in addition to the action keyword. Which tells the computer what to do when you click the button, there is also the hovered and unhovered keywords which tell the computer what to do when you hover or unhovered over the button. So rather than action show screen, hover show the screen with the image and unhover hide the screen.

[trooper6]

I'm also thinking more about your question.

The thing about computer programming is that there are usually lots of different ways to do what you want to do. Figuring them out through reading documentation and experimenting is one of the best ways to get better at coding.

As I wondered about from one cafe to another I remember the tooltip function. That could also be used to do what you want:
http://www.renpy.org/doc/html/screen_ac ... l#tooltips

Also, you could probably use a condition switch as well:
http://www.renpy.org/doc/html/displayab ... tionSwitch

There are a lot of ways to get what you want. Determining what is best is dependent on a number of factors. What is the larger point of what you want? You want a tooltip pop up with images. Why? What happens when you click on the actual buttons? Is this screen supposed to be a menu that takes you out of the game? Or not?

I mean there are a lot of ways of doing what you asked.

[Exiscoming]

Thanks for all the feedback! Honestly, I want to keep it as simple as possible. I'm making a navigation map and simple want a picture to show up the moment you hover over 1 of the buttons. Then when you click the button you jump to a new scene. It's mostly based on this tutorial:
http://lemmasoft.renai.us/forums/viewto ... 51&t=22410

I'll spend some time reading through your codes and suggestions to try and figure it out. I had a hard time trying to wrap my head around the wiki and am more used to finding out how someone else did it and then seeing if I could implement it myself.

[xavimat]

I think this is the simplest you can get:

Code: Select all

screen the_map():
    imagemap:
        ground "UI/ForgeMap.png"
        hover "UI/ForgeMap-hover.png"
        hotspot (52, 124, 225, 108) clicked Jump("icecream") hovered ShowTransient("the_img", img="icecream.png") unhovered Hide("the_img")
        hotspot (53, 234, 222, 118) clicked Jump("hamburger") hovered ShowTransient("the_img", img="hamburger.png") unhovered Hide("the_img")
        hotspot (52, 353, 223, 101) clicked Jump("cake") hovered ShowTransient("the_img", img="cake.png") unhovered Hide("the_img")

screen the_img(img):
    add img pos (354, 80)