0 Favourites

How do I Get Multiple Mouse Hover Events to Work?

  • I'm having problems setting up what I believe should be pretty simple Mouse Hover events. I removed the background image to make the CAPX fit size requirements.

    Goal:

    * 4 option PNG based menu, each having a semi-transparent block around the text.

    * On Mouse Hover for each menu item, fade in a highlighted version with a transparent background (the highlight will be on top of the base image, see the Load button for an example that is working).

    * On Not (X) Mouse Hover, fade out previously highlighted item.

    Result:

    * Only 1 button (Load) fades in when the semi-transparent Sprite border is crossed.

    * All other buttons fade in when the text itself is reached (you can move around the edges of the images to no effect, slide the mouse down the buttons' front edges, only Load lights up).

    * It seems like it's only picking up the non-transparent text and not the semi-transparent bounding box, but the Load button works as I expected (its events are at the top of the Event Sheet).

    Sprite Source:

    * All button PNG files (base and highlight) were created from the same template in Photoshop (2 layers, I turn off the text Style to create the base versions, hide the semi-transparent background for the highlights)

    Tested In:

    * Firefox (36.0.1)

    * Internet Explorer (11.0.9600.XXX)

    Construct 2 Version:

    * Release 195 (64 bit) - Unlicensed at this point (still determining viability)

    For testing I moved the highlight versions off of the base versions where it wasn't working, removing any overlap, to ensure that they weren't capturing the Mouse Hover.

    Can Mouse Hover be checked this much in a single event page (it would surprise me if that were the case)? Am I ordering things incorrectly?

    Any insight would be appreciated.

    Thanks,

    Jason

  • Don't really understand what you're after, but see attached. Is this how you expect it to function? If so, it's just a matter of ordering the z-order bar on the view menu.

    If this isn't what you mean, then sorry

  • Construct 3

    Buy Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Buy Now Construct 3 users don't see these ads
  • Thanks for the very fast reply. The CAPX you included still doesn't do what I'm looking for.

    I want the highlight image (Load_Highlight for example) to fade in when the base (just Load for the example) as SOON as the grey bounding box of the base is entered (just generated Clouds in Photoshop).

    I only see this working for the Load button, the other three fade in the highlight only when the mouse is on the text itself (for me the highlight even fades out when I position the mouse in the upper open area of the N in New, as well as some other obviously "hovering over" areas where there isn't black letter pixels).

  • OK, I boiled down the issue to the smallest CAPX I could. There are just two images and one event (displays the 2nd image, sets fade settings, starts fade).

    Having the images stacked doesn't change anything.

    I want the 2nd image to fade as soon as the rectangle on the first image is hovered over (with the tip of the mouse as the reference, I'm able to get the entire mouse pointer on the image without the event triggering). But, it only works when I hover over the words.

    My mouse is just sitting over the edge of the image here (2nd image doesn't fade in):

    [attachment=2:25yqziiz][/attachment:25yqziiz]

    But when I go over the letters, the 2nd image fades in:

    [attachment=1:25yqziiz][/attachment:25yqziiz]

    The first image has no transparency (doesn't seem to have an effect, the transparent version had the same problem).

    Anyway, the new CAPX is barebones (2 images, one event with 4 steps, I've tried reordering the event conditions as well as the steps).

    Any ideas? This seems extremely simple (but is proving considerably frustrating).

  • Case closed.

    All right, I figured out a way to get it working. I created a solid black rectangle image sprite the same size as the other images. I put it on the bottom (so the original image, highlight, and the black rectangle are all stacked at the same location and ordered correctly), made it invisible, and then set the event to trigger when this new sprite was hovered over.

    Seems like a bug to me or something, like the black color is what is letting the hover event trigger.

    Working CAPX attached.

  • I'm glad you got it working to your satisfaction.

    Looking at your original, wouldn't you have achieved the same result by just setting the collision polygon to bounding box, rather than the random collision polygons that exist at the moment?

  • Thanks zenox98, there's a reason I put this in the beginner's forum, I'm still trying to figure everything out. I had checked the image editor's options, but it seems like I missed the collision polygon option.

    That's a much better solution than an additional solid black invisible sprite (sized equally to what it is meant to handle events for) at the bottom of the layer for every button...

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)
Similar Topics Posts Views Last Post
Unread sticky
4,517 857,242
Tinimations's avatar
Tinimations
Unread sticky
1,586 437,254
matriax's avatar
matriax
Unread hot topic
378 33,255
part12studios's avatar
part12studios