Button Hover image

How to change the image of a button when you hover on it

Page 1 of 1

7 Replies - 23184 Views - Last Post: 11 April 2009 - 07:15 AM Rate Topic: -----

#1 tnbrewer  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 07-April 09

Button Hover image

Post icon  Posted 09 April 2009 - 08:08 PM

Hi All!!!

Well, I have a two part question.

1. I have a picture that I want to make as a button. Actually, I have two. One picture is of it and another is the button highlighted when the mouse moves over it. How do I get the picture to be a button without having to try and add the image to the button property?

2. If I have to have the image as a property of the button, how do I get the image to change to another image when you move the mouse over it?

I am very much a beginner at this and I can't find this info anywhere. Please help.

Attached image(s)

  • Attached Image


Is This A Good Question/Topic? 0
  • +

Replies To: Button Hover image

#2 maffelu  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 41
  • View blog
  • Posts: 190
  • Joined: 21-August 08

Re: Button Hover image

Posted 10 April 2009 - 02:05 AM

Could this help?

This works and changes the picture:


using System;
using System.IO;
using System.Drawing;
using System.Windows.Forms;

namespace DICexamples
{
	public partial class MainForm : Form
	{
		public MainForm()
		{
			InitializeComponent();
		}
		
		void MainFormLoad(object sender, EventArgs e)
		{
			//Load the picture
			string path = "pic1.png";	
			pictureBox1.Image = Image.FromFile(path);
		}
		
		void PictureBox1MouseHover(object sender, EventArgs e)
		{
			//If mouse hovers above the box, show pic2
			string path = "pic2.png";	
			pictureBox1.Image = Image.FromFile(path);
		}
		
		void PictureBox1MouseLeave(object sender, EventArgs e)
		{
			//This is to make sure that when the mouse leaves
			//the picture changes back
			string path = "pic1.png";	
			pictureBox1.Image = Image.FromFile(path);
		}
	}
}

Was This Post Helpful? 0
  • +
  • -

#3 tnbrewer  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 07-April 09

Re: Button Hover image

Posted 10 April 2009 - 07:32 AM

Thanks! I will try this!
Was This Post Helpful? 0
  • +
  • -

#4 tnbrewer  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 07-April 09

Re: Button Hover image

Posted 10 April 2009 - 10:45 AM

Nope... it did not work... maybe I am doing this wrong... I need a little more info.
Was This Post Helpful? 0
  • +
  • -

#5 papuccino1  Icon User is offline

  • His name was Robert Paulson.
  • member icon

Reputation: 63
  • View blog
  • Posts: 1,121
  • Joined: 02-March 08

Re: Button Hover image

Posted 10 April 2009 - 01:33 PM

Ok lad, here's what you do :pirate: :

1. First place some buttons on your form in the Design tab. Just drag them from the Toolbox.

2. Change the background image of said button in the Properties tab (Press F4 when your button is selected) by importing the image to your project.

Posted Image

Posted Image

3. Select MouseEnter event on the event tab and double click it to enter the programable part of said event.

Posted Image

4. Make it so on this event button1.BackgroundImage = 'your image here'. To switch back to the original image when the mouse leaves, just program into the MouseLeave event and change the picture to "ImageX".

Hopefully this helps you. Cheers! :pirate:

This post has been edited by papuccino1: 10 April 2009 - 03:14 PM

Was This Post Helpful? 1

#6 Cha0sBG  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 5
  • View blog
  • Posts: 167
  • Joined: 09-April 09

Re: Button Hover image

Posted 10 April 2009 - 03:12 PM

add the image to your resources and then double click on the mouse button event and enter this code:
 button1.BackgroundImage = Proparties.Resources.imaname
where the "imagename" at the last part of the code is the image name at the resources. or consider this video tutorial:
http://msdn.microsof...p/bb798026.aspx
Was This Post Helpful? 0
  • +
  • -

#7 tnbrewer  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 07-April 09

Re: Button Hover image

Posted 11 April 2009 - 03:02 AM

Dude! That was awesome! it works great. Where did you find that video?
Was This Post Helpful? 0
  • +
  • -

#8 Cha0sBG  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 5
  • View blog
  • Posts: 167
  • Joined: 09-April 09

Re: Button Hover image

Posted 11 April 2009 - 07:15 AM

If u take a closer look at the link u will see it's the Microsoft How Do I series :)
if u like more of those videos please visit this link:
http://msdn.microsof...p/bb798022.aspx

Enjoy and keep learning ^^
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1