Circular/Overlapping Imagemap Hotspots? [Solved]

[yon]

I'm trying to work on an imagemap for my game, and this is what I have so far:



This is just the ground image, but I have a hover one as well. What I'm wondering about is if it's possible to have circular and/or overlapping hotspots on an imagemap. As you can tell, I have two intersecting circles, since the locations are near each other. But I want only one to highlight when you hover over that specific location.

Is this doable, or should I just move one of the circles?

[meiri]

Circular is not possible, hotspots are only rectangular.
From my understanding when you overlap hotspots, neither of them activate when you click the overlapping area. But this could be differig from case to case.

[yon]

Circular is not possible, hotspots are only rectangular.

That's what I thought, but it's good to get confirmation. So, you just draw a rectangle around the circular button then? That seems to be what makes the most sense.

[meiri]

Circular is not possible, hotspots are only rectangular.

So, you just draw a rectangle around the circular button then?

Yes, you can. However, to make sure that the "corners" of the circles aren't responsive as well, make sure alpha is set to True within your imagemap statement. (It's the default setting, but I would enter it in just to be sure.) You can read about it here if you don't already know about alpha. (Scroll to where it says alpha.)

[yon]

Okay, I moved the overlapping circle to another area so it's easier to deal with.

ground: http://i.imgur.com/UTmNBLF.png
hover: http://i.imgur.com/VTuo0OB.png

So, I noticed it says up to 6 images on an imagemap? Does that mean I can only have 6 buttons available? As you can see, I have 11 total spots, so that may make it difficult.

Also, do I have to manually define each hotspot, or can I somehow use a .psd file or something like that with layers to do it automatically?

(That's not off-topic, is it? I know there's supposed to just be one per thread.)

[chocojax]

By 6 images, it means 6 different states (ground, insensitive, idle, hover, selected_idle, selected_hover).

For what meiri said, I would suggest making the hover .png ONLY the changed images (everything is transparent EXCEPT for the circles and the name boxes) so that it would only activate if you hover over the circle, as long as you make alpha set to True.

Also, yeah, I believe you do have to manually define each hotspot. You can do CRTL+D (or some something else, I forgot how to get to the dev's menu thing) so that you can easily find the coords for the hotspots. :D

[trooper6]

Would image buttons be easier for this?

[yon]

Alright, I made these versions.

imagemap_ground:


imagemap_hover:


Would I have to make any other versions to get the other states (ground, insensitive, idle, hover, selected_idle, selected_hover)?

Also:

Would image buttons be easier for this?

I have no idea, so I'm just going to leave it up to you guys on that one. Thank you for all the help so far!

[meiri]

Alright, I made these versions.

imagemap_ground:
[image]

imagemap_hover:
[image]

Would I have to make any other versions to get the other states (ground, insensitive, idle, hover, selected_idle, selected_hover)?

Also:

Would image buttons be easier for this?

I have no idea, so I'm just going to leave it up to you guys on that one. Thank you for all the help so far!

Here, I am thinking that maybe your ground image should be the full map without the red circles (and the text at the bottom unless that text is functional.) You need an idle image, so idle would be the red circles, and then you have the same hover image.

You do not need an image for ALL the states. ground, I think serves as a background image. Insensitive is what your button looks like if it does nothing, is null, or is deactivated/disabled for the moment. Idle is when it is not hoverered over. Hover is when it IS hovered over. Selected_idle and selected_hover... Think of your preference screen. Lets say the "window" button is selected because your game is in windowed mode. Selected_idle is when you are not touching the window button. Selected_hover is when you are hovering over it.

I felt like maybe imagebuttons WOULD be easier, but that would require making a seperate fullscreen image of each circle, although the coding would be easier, in my opinion.

[yon]

I see, that makes sense. I have a sai file with all the layers in place, so it's no problem to make a ground image with no circles.

I think I can figure out how to do the coding, what with the documentation and help from the forums if need be. So I'll stick with an imagemap for now.

Thank you for all your help!