Show image with imagemap

[Appryl]

Hi everyone !
I have a problem: on my imagemap, I want to display another image (apart the selected image) when the user places his mouse on an hotspot, but the image should only appears when the mouse is on the "main" hotspot, not on the image...
How can I do this ?

Here's a scheme, 'cause I'm not english and I'm not sure that you really understand what I want to say... x)

http://image.noelshack.com/fichiers/201 ... isplay.png

(PS: I put four images for each hotspot, but in reality I want to display a single big one image for a single button (Button 1 image 1, button 2 image 2 etc... like a background or something like that))

Thank you a lot !

[Ocelot]

Make that image a part of 'hovered' image. And use 'focus_mask' to explicitely set whick parts of the image should beclickable. Something like that: http://puu.sh/rEogD/f075ca7c26.png

It would look like that:

Code: Select all

imagebutton auto 'images/some_image_%s.png' focus_mask 'images/some_image_mask.png' #everything else

[Appryl]

Thank you I think I understand what to do, I test it and I tell you ! o/

EDIT:

Hmm, when I try to reach the In-game Menu my game crashes...

Here's my code:

Code: Select all

 if main_menu:

            textbutton _("Start") action Start()

        else:
            [b]imagebutton action ShowMenu("history") auto 'images/image.png' focus_mask 'images/bouton.png' [/b]
            
            textbutton _("History") action ShowMenu("history")

            textbutton _("Save") action ShowMenu("save")

I'm sure I made a big mistake, it's my first time with imagemaps, excuse me... x)

[Ocelot]

I see, you have problem with auto part. For future, it helps to provide exact error. Easier to figure out what is wrong.

For now you can drop it, and just set images manually.
You will need:
1) Idle image. The one which will be shown when you do not point at it.
2) Hover image. This one will be shown when you hover over your button.
3) Mask. (technically optional, but I found that complex shapes work better with it defined.)

Then you define button like:

Code: Select all

imagebutton idle 'images/idle_image.png' hover 'images/hover_image.png' focus_mask 'images/mask_image.png' #rest

'auto' statement is a bit tricky. You need to have '%s' in there somewhere. That part will be replaced by 'idle', 'hovered', etc. and corresponding images will be loaded from disc, if possible.

auto '%s_image.png' will be equivalent to defining idle 'idle_image.png' hover 'hover_image.png', etc. It is really useful, when you start using three to five states per button, to reduce clutter in button definition.

I forgot to link relevant documentation in previous post. Here it is: https://www.renpy.org/doc/html/screens.html#imagebutton

[Appryl]

Thank you, it worked !
It was really simple after all... But now I can do it correctly... x)