Image Buttons With Rollover help

Unity Engine
1

So for my University project I need to make a 2D game, Currently I have 3 buttons that have text.

But what I want to do is remove the text and make them work from images that, well Rollover to a different image and I have no idea how to edit the code to make this possible.

If there is a way to edit this code (Below) so that the buttons use an image instead of the text it would be of great help!

Thanks for any help!

using UnityEngine;
using System.Collections;

public class MenuPage : MonoBehaviour {
   
    public int buttonHeight = 30;
    public int buttonWidth = 150;
    public int buttonPadding = 10;


    public Texture2D background;
    public GUIStyle mystyle;

   
    private int currentState = 0;
    private const int MAINMENUPAGE = 0;
    private const int INSTRUCTIONSPAGE = 1;
    private const int CREDITSPAGE = 2;
   
    void OnGUI(){
        GUI.DrawTexture(new Rect(0,0,Screen.width, Screen.height), background, ScaleMode.ScaleToFit);
        switch(currentState) {
        case MAINMENUPAGE:
            displayMainMenuPage();
            break;
        case INSTRUCTIONSPAGE:
            displayInstructionsPage();
            break;
        case CREDITSPAGE:
            displayCreditsPage();
            break;
        }
    }
   
    void displayMainMenuPage(){       
        int buttonSeparator = buttonHeight+buttonPadding;
        int numberOfButtons = 3;
        int groupHeight = numberOfButtons*buttonSeparator;
        Rect groupRect = new Rect(250+Screen.width/2-buttonWidth/2, Screen.height/5-groupHeight/2, buttonWidth, groupHeight);
       
        GUI.BeginGroup(groupRect);       
        if(GUI.Button(new Rect(0,0*buttonSeparator,buttonWidth,buttonHeight), "Start", mystyle)){
            Application.LoadLevel("Leve1");
        }
        if(GUI.Button(new Rect(0,1*buttonSeparator,buttonWidth,buttonHeight), "Instructions", mystyle)) {
            currentState=INSTRUCTIONSPAGE;
        }
        if(GUI.Button(new Rect(0,2*buttonSeparator,buttonWidth,buttonHeight), "Credits", mystyle)) {
            currentState=CREDITSPAGE;
        }
        GUI.EndGroup();
    }
2

Take a look at the new UI system Unity has implemented in 4.6.

Here are a list of tutorials that will guide you through the new system. Look at the Button tutorial for explicit information related to your problem.

After you watch the videos and understand how the system works (make several buttons and play with the settings to see what you get), read further this post. Until then, you should stop reading here and come back after you understand.

The Button Component has a Transition value that you can change to “Sprite Swap”. After that, just drag and drop the sprites you want to be displayed for each of the following states : Highlight , Pressed, Disabled.