How do I hover over an image and change it to a different image?

Unity Engine
1

I am trying to make the main menu for my game and I wanted it so when I hover over the buttons a little icon appears next to the word showing that I am hovering over it. Here is an example of something I am going for.
Just watch like 5 seconds of it here.

I have two images for each word; one without the icon and one with the icon. I just have no idea how to script it.

Please help! If you are confused by what I mean please don’t hesitate to have me clarify.

2

Hm… do you mean the little pictures on either side of “Start Game” ?:slight_smile:

3

Yes exactly what I mean! I want to be able to hover over my start game and have those pictures appear on both sides. I assume its an event trigger hover with the script. But I have no idea how to script it :frowning:

4

I guess, as you said, you could have 2 images (1 with and 1 without). You could also have the image there but just disabled… in any event, event trigger I guess is one option. I would just use OnPointerEnter maybe :slight_smile:
When you say hover, do you mean that it appears after some time or just as soon as you’re over it?

If you’re hovering over nothing, and don’t want to keep your last selection, I’d add in the OnPointerExit :slight_smile:

5

I want to have it appear as soon as I am over it, and yes I will add the OnPointerExit, I totally forgot about that. What do I have to program to get it to work? I tried GetComponent Image and changing it but I think I did it all wrong.

6

Well, my crystal ball to what you wrote is in the shop :stuck_out_tongue: j/k…
Do you want to post your code?

7 
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class Buttons : MonoBehaviour {
    public Image hover;
    Image GetImage;
    // Use this for initialization
    void Start () {
        GetImage = GetComponent<Image>();
    }
   
    // Update is called once per frame
    void Update () {
       
    }

    public void ButtonHover(){
        GetImage = hover;
    }
}

I then hooked the script on to a game manager, added event triggers to the buttons and nothing happened.

8

Okay, try with a Sprite instead of image for “hover” ? Image is like the …um… UI Script, and sprite is the actual … picture? lol confused me for a while.
Also, try GetImage.sprite = hover

9

This is what I changed it to.

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class Buttons : MonoBehaviour {
    public Sprite hover;
    Image GetImage;
    // Use this for initialization
    void Start () {
        GetImage = GetComponent<Image>();
    }
   
    // Update is called once per frame
    void Update () {
       
    }

    public void ButtonHover(){
        GetImage.sprite = hover;
    }
}

I still have no result from it.

10

Okay…I don’t use event triggers, but a couple of questions. Do they ask you for a method to call on the event and you’ve chosen “ButtonHover” .(pretty sure… looked it up:))
2) This script is on the button, also?

11

3276865--253385--Capture.PNG
3276865--253385--Capture.PNG750×544 43.1 KB
3276865--253386--Capture2.PNG
3276865--253386--Capture2.PNG756×349 30.2 KB

The script is on the game manager I have then the event trigger references the game manager and calls upon the script.

12

It occurs to me that I forgot something… there is a sprite swap functionality built into buttons, I believe.
You could try that! :slight_smile: lol

13

Okay, so in addition to the sprite swap option in my last post… just for clarification on your situation: currently you’re getting the Image component of the game manager… that’s why nothing appears to be happening.
If you did continue with the code above, you’d have to get the component from the Button.
But I think the sprite swap might just be much easier for you…

If you did continue, err… I’d say you should put the IPointerEnter (/Exit) interfaces… and put them on the button.
Hopefully this all makes some sense :slight_smile:

14

Why yes it does! Haha! It works! Thank you so much! :):):slight_smile:

15

haha… awesome. :slight_smile:

16

To add to what methos said, pretty sure the menu in that video is also listening to the Select and Deselect events from the event system as well. Select/Deselect events will allow you to highlight the buttons via navigation by keyboard or controller. PointerEnter/Exit events only work with mouse (and specifically touch dragging for mobile). Supporting both Select/Deselect and PointerEnter/PointerExit events will allow your UI to support far more input mediums and platforms

This is all moot of course since the button class inherits from UI.Selectible which in total means it implements several EventSystem events. Including Enter,Exit,Select and Deselect (among others). Meaning you can get this behaviour by default in Unity with zero scripting. However, this little knowledge can come in handy when you want to make some special user interface without buttons. For example, I made a similar implementation using 3d world objects, not UI Buttons.

17

Thanks for the advice!