Click here to Skip to main content

Article

CHoverButton - A Simple hoverbutton with One Bitmap and a tooltip

Niek Albers

Rate me:

4.81/5 (25 votes)

12 Oct 2000

425.1K

6.2K

103

60

A simple drop-in class that provides a 'hot' look button using the _TrackMouseEvent function

Download demo project - 16 KB

Sample Image - hoverbutton.gif

Introduction

Looking around for some nice bitmap hover buttons, I just couldn't find what I was looking for. In this case, there are a couple of things you can do:

Leave it.
Buy it.
Steal it.
Get it for free.
Start crying.
Do it yourself (and possibly share it).

I'll share!

I found another hoverbutton class that uses SetCapture() and ReleaseCapture(). Using this method gave me some problems. I can't remember why, but it did to me. So I thought why do it so difficult? MS has a nice API to handle hover states: _TrackMouseEvent().

So here it is... the class. After a long thought, I decided to call it: CHoverButton. I used some classes and information found elsewhere (thanks to the people for that).

How to Use It?

In your resource editor, create a button and set the 'owner draw' property.
Use classwizard to create a CButton object in your dialog.
Include the "hoverbutton.h" file in your dialog class file.
Rename the CButton object type to CHoverButton.
Create a bitmap with three buttonstates: Up/Down/Hover. The pictures need to be right next to each other.
The button will calculate its own size = (the width of the bitmap)/3.
You can use true color bitmaps here. See below for an example image.
In the OnInitDialog(), load the bitmap with mybutton.LoadBitmap(IDC_MYBUTTON);
Set a tooltip with mybutton.SetToolTipText();
Compile and enjoy.

Have fun!

License

This article has no explicit license attached to it, but may contain usage terms in the article text or the download files themselves. If in doubt, please contact the author via the discussion board below.

A list of licenses authors might use can be found here.

Written By

Niek Albers

Web Developer

Netherlands

Niek is the founder and programmer of DaanSystems.com and is working on many projects all the time. He makes a living by doing contractwork for others.

Comments and Discussions

Enable/Disable Issue with IE9

HydGuy31-Jan-12 3:48

31-Jan-12 3:48

Did anyone encounter a problem with IE9 on these buttons.They are not Enable/disable as needed in IE9, no issues with the older versions of the IE.Please let me know the solutions for this ASAP

FIX: m_ToolTip.AddTool() with correct button size [modified]

Christoph Conrad26-Jul-10 0:57

Christoph Conrad

26-Jul-10 0:57

Change:

CRect rectBtn;
GetClientRect(rectBtn);
m_ToolTip.AddTool(this, (LPCTSTR)*spText, rectBtn, 1);

To:

CRect rectBtn(0, 0, m_ButtonSize.cx, m_ButtonSize.cy);
m_ToolTip.AddTool(this, (LPCTSTR)*spText, rectBtn, 1);

modified on Tuesday, July 27, 2010 4:24 AM

Text "Click me" not shown

the Jimmy21-Feb-07 20:10

21-Feb-07 20:10

First of all, this is very nice. This is something I've been looking for.

I checked this out, it works well except some small problem, at least this is what I observed. I hope someone could fine tune this Hoverbutton to correct this.

The text "click me" show when the mouse move over the button, this works everytime as long as you don't wait for awhile until the text "click me" disappeared by itself.

The problem I see is that once the text "click me" disappeared, move the mouse over the button again will not guaranty the text "click me" will be shown again. I had to click somewhere on the desktop, then click on the Hover window again, then moving the mouse over the button, then "click me" will show again.

Thanks in advance.

Jim

Re: Text "Click me" not shown

Duhasty5-Apr-09 5:36

5-Apr-09 5:36

LRESULT CHoverButton::OnMouseLeave(WPARAM wparam, LPARAM lparam)
{
m_bTracking = FALSE;
m_bHover=FALSE;
ActivateTooltip(FALSE);
ActivateTooltip(TRUE);
Invalidate();
return 0;
}

text over bitmap

tyounsi2-Jan-07 14:07

2-Jan-07 14:07

It might be interesting to support overlay of text as well..

Cheers

load image from file [modified]

a.damm7-Aug-06 21:51

7-Aug-06 21:51

Nice control!

Another little improvement:

Add this function to hoverbutton class to be able to load the image from a file:

// Load a bitmap from a file in the button, the bitmap has to have 3 buttonsstates next to each other: Up/Down/Hover
BOOL CHoverButton::LoadBitmap(const char* bitmapfile)
{
	if(_access(bitmapfile,0)!=0)
	{
		::MessageBox(0,bitmapfile,"image file not found",MB_OK);
		return true;
	}

	mybitmap.Detach();
	mybitmap.Attach(::LoadImage(::AfxGetInstanceHandle(),bitmapfile, IMAGE_BITMAP,0,0,LR_LOADFROMFILE | LR_LOADMAP3DCOLORS));

	BITMAP	bitmapbits;
	mybitmap.GetBitmap(&bitmapbits);
	m_ButtonSize.cy=bitmapbits.bmHeight;
	m_ButtonSize.cx=bitmapbits.bmWidth/3;
	SetWindowPos( NULL, 0,0, m_ButtonSize.cx,m_ButtonSize.cy,SWP_NOMOVE|SWP_NOOWNERZORDER );
	Invalidate();
	return TRUE;
}

Note: you need to include io.h

-- modified at 3:55 Tuesday 8th August, 2006

Transparent bitmaps

Gismow26-Jul-06 22:10

26-Jul-06 22:10

Hi,

nice work...

Here's another way to make the bitmap background transparent :

1. Open thze bitmap and fill the background with pink (RGB(255, 0, 255)).

2. Change the DrawItem function from using BitBlt to TransparentBlt.

if(lpDrawItemStruct->itemState & ODS_SELECTED)
{
mydc->TransparentBlt(0,0,m_ButtonSize.cx,m_ButtonSize.cy,pMemDC,m_ButtonSize.cx,0,m_ButtonSize.cx,m_ButtonSize.cy, RGB( 255, 0, 255 ));
}
else
{
if(m_bHover)
{
mydc->TransparentBlt(0,0,m_ButtonSize.cx,m_ButtonSize.cy,pMemDC,m_ButtonSize.cx*2,0,m_ButtonSize.cx,m_ButtonSize.cy, RGB( 255, 0, 255 ));
}else
{
mydc->TransparentBlt(0,0,m_ButtonSize.cx,m_ButtonSize.cy,pMemDC,0,0,m_ButtonSize.cx,m_ButtonSize.cy, RGB( 255, 0, 255 ));
}
}

Works nice. But be careful. On Windows 9x and ME TransparentBlt produces memory leaks.

Greetinx
gismow

plz help me to solve tis problem with getting Front Page 98’s hover buttons to function.

ac sakura7-Jul-06 1:59

7-Jul-06 1:59

Cry | :((

Cry | :((

You are experiencing problems with getting Front Page 98’s hover buttons to function. You are supposed to solve this problem in a very short time. Think about the possible ways that you can do to solve this problem very quickly. plzzzzz Confused | :confused:

Confused | :confused:

Applet codes of your web page is as follow:

<applet code="fphover.class" codebase="./" width="120" height="24">
<param name="color" value="#000080" />
<param name="hovercolor" value="#0000FF" />
<param name="textcolor" value="#FFFFFF" />
<param name="text" value="C Programming" />
<param name="effect" value="glow" />
<param name="url" valuetype="ref" value="http://metalab.uniten.edu.my/~azhana/indexCProg.html" />

nothing

u r experiencing problem with getting Front Page 98's Hover buttons to fuction

ac sakura7-Jul-06 1:53

7-Jul-06 1:53

think about the possible ways that can do to solve this problem very quickly..plz help me??
<applet code="fphover.class" codebase="./" width="120" height="24">
<param name="color" value="#000080" />
<param name="hovercolor" value="#0000FF" />
<param name="textcolor" value="#FFFFFF" />
<param name="text" value="C Programming" />
<param name="effect" value="glow" />
<param name="url" valuetype="ref" value="http://metalab.uniten.edu.my/~azhana/indexCProg.html" />

nothing

Slightly Off Topic

69 Bay4-Jul-06 6:26

4-Jul-06 6:26

Nice class - thanks very much.

Slightly off topic. I like the bitmap that you have produced for the button - how is this done? I am not a graphics person, so whenever I have drawn bitmaps (usually in Visual Studio), they have been rather crude. Is there a simple way to produce the '3D' effect on the button?

Thanks for any advice you can give

Mike

ramyasangeet8-Mar-06 21:52

8-Mar-06 21:52

hello,

I have designed buttons using the class hoverbutton .But am not getting the tool tips for the buttons.I have placed these button over a background image.

Plz help me

cheers

sangeet

-- modified at 3:55 Thursday 9th March, 2006

dinamic creation

Max Santos8-Feb-06 14:09

8-Feb-06 14:09

Hello

I am trying to use this on a dinamic created button with no luck.

I have set the BS_OWNERDRAW flags , but allways shows blank (no bitmap).

Any ideas?

Button Not Showing up

tweetpiyo6-Feb-06 7:15

6-Feb-06 7:15

Please help. I try to integrate CHoverButton into my project. I follow all the steps and set the button to OWNER_DRAW. However, the button will not show up. Any idea? Thanks.

Minor improvement - transparent background

Hans Dietrich5-Sep-04 9:11

5-Sep-04 9:11

Thank you for this nice control!

Here is a minor improvement. To make bitmap transparent, set bitmap bits that should be transparent to RGB(255,0,255). Then change the DrawItem() function as follows:

void CHoverButton::DrawItem(LPDRAWITEMSTRUCT lpDrawItemStruct) 
{
    CDC *mydc = CDC::FromHandle(lpDrawItemStruct->hDC);

    CDC * pMemDC = new CDC;
    pMemDC->CreateCompatibleDC(mydc);

    CBitmap * pOldBitmap = pMemDC->SelectObject(&mybitmap);
    CPoint point(0, 0);    

    // *****  new code  *****
    COLORREF rgbButtonFace = ::GetSysColor(COLOR_BTNFACE);

    for (int x = 0; x < m_ButtonSize.cx*3; x++)
    {
        for (int y = 0; y < m_ButtonSize.cy; y++)
        {
            COLORREF rgb = pMemDC->GetPixel(x, y);

            // transparent color = magenta
            if (rgb == RGB(255,0,255))
                pMemDC->SetPixel(x, y, rgbButtonFace);
        }
    }
    // ***** end of new code *****
    
    if (lpDrawItemStruct->itemState & ODS_SELECTED)
.
.
.

Re: Minor improvement - transparent background

Anne Jan Beeks25-Jun-05 3:32

25-Jun-05 3:32

I agree with Hans: thank you Niek for this nice control.
I have a minor update to Hans' minor update:
Use the topleft corner of the bitmap as the tranparent color:

void CHoverButton::DrawItem(LPDRAWITEMSTRUCT lpDrawItemStruct) 
{
  CDC *mydc=CDC::FromHandle(lpDrawItemStruct->hDC);
  CDC * pMemDC = new CDC;
  pMemDC -> CreateCompatibleDC(mydc);
  CBitmap * pOldBitmap;
  pOldBitmap = pMemDC -> SelectObject(&mybitmap);
  //	CPoint point(0,0);	
  // *****  new code  *****
  COLORREF rgbButtonFace = ::GetSysColor(COLOR_BTNFACE);
  COLORREF transparentcolor = pMemDC->GetPixel(0, 0); // use the topleft pixel color as transparent color
  for (int x = 0; x < m_ButtonSize.cx*3; x++)
  {
    for (int y = 0; y < m_ButtonSize.cy; y++)
    {
      COLORREF rgb = pMemDC->GetPixel(x, y);
      if (rgb == transparentcolor)
      {
        pMemDC->SetPixel(x, y, rgbButtonFace);
      }
    }
  }
  // *****  end of new code  *****
  if(lpDrawItemStruct->itemState & ODS_SELECTED)

Regards Anne Jan Beeks

Re: Minor improvement - transparent background

Sims11-Aug-05 0:36

11-Aug-05 0:36

I am not too familiar with the whole transparent thing, but wouldn’t a real transparent control replace the colour with the background colour?

Something like
...
//
// extern COLORREF m_rgbTrans, given by user.
//
COLORREF rgb = pMemDC->GetPixel(x, y);

// transparent color = magenta
if (rgb == m_rgbTrans )
pMemDC->SetPixel(x, y, mydc->GetPixel(x,y));
...

Sims

Re: Minor improvement - transparent background

newofilms7-Dec-05 15:04

7-Dec-05 15:04

I agree with everyone that this is a nice control.
I also have a minor update to everyone's minor update.

The new code is a little slow and because it is performed everytime the image is updated, I noticed there's some flicker. Why not change the "transparent" colour only once when we first load the bitmap? I suggest changing LoadBitmap instead of DrawItem:

BOOL CHoverButton::LoadBitmap(UINT bitmapid)<br />
{<br />
	mybitmap.Attach(::LoadImage(::AfxGetInstanceHandle(),MAKEINTRESOURCE(bitmapid), IMAGE_BITMAP,0,0,LR_LOADMAP3DCOLORS));<br />
	BITMAP	bitmapbits;<br />
	mybitmap.GetBitmap(&bitmapbits);<br />
	m_ButtonSize.cy=bitmapbits.bmHeight;<br />
	m_ButtonSize.cx=bitmapbits.bmWidth/3;<br />
<br />
        // *****  new code  *****<br />
	//Set Background colored pixels to dialog background color<br />
	CDC cdcBitmap;<br />
	COLORREF rgbButtonFace = ::GetSysColor(COLOR_BTNFACE);<br />
	COLORREF rgbTransparentColor;<br />
	COLORREF rgbPixel;<br />
<br />
	cdcBitmap.CreateCompatibleDC(NULL);<br />
	cdcBitmap.SelectObject(mybitmap);<br />
	rgbTransparentColor = cdcBitmap.GetPixel(0, 0);<br />
	for (int x = 0; x < bitmapbits.bmWidth; x++)<br />
	{<br />
		for (int y = 0; y < bitmapbits.bmHeight; y++)<br />
		{<br />
			rgbPixel = cdcBitmap.GetPixel(x, y);<br />
			if (rgbPixel == rgbTransparentColor)<br />
			{<br />
				cdcBitmap.SetPixel(x, y, rgbButtonFace);<br />
			}<br />
		}<br />
	}<br />
	cdcBitmap.DeleteDC();<br />
        // *****  end of new code  *****<br />
<br />
	SetWindowPos( NULL, 0,0, m_ButtonSize.cx,m_ButtonSize.cy,SWP_NOMOVE   |SWP_NOOWNERZORDER   );<br />
	return TRUE;<br />
}

Stephen.

Button as Hyperlink in MFC

Member 82043224-Mar-04 1:59

24-Mar-04 1:59

Hi all
I am drawing bitmap image on a button and now want to make this buttan as hyperlink.
Is there any way in MFC to make buttons as hyperlink

Thanks

With Regards
Sunil Joshi

Something maybe better!

Tailor28-Feb-04 21:06

28-Feb-04 21:06

Thank you for the nice work!! But the button shape is rectangle, I added some new features to the class, now the button's shape is relatived to the bitmap.how can I upload my class?

Problem compiling example in VC++ 7

Sick@work4-Nov-03 2:34

4-Nov-03 2:34

When i try to compile your example i get following error message:

d:\[ Projects ]\MFC_incoming\hover_button\HoverButton.cpp(32): error C2440: 'static_cast': 'void (__thiscall CHoverButton::* )(WPARAM,LPARAM)' kann nicht in 'LRESULT (__thiscall CWnd::* )(WPARAM,LPARAM)' konvertiert werden

I´m a newbie in c++.
It would be nice if someone could help.

Re: Problem compiling example in VC++ 7

HJ Jo12-Dec-03 1:57

12-Dec-03 1:57

Smile | :)

It has very simple solution about this problem.

Try as follows :

In HoverButton.h...

protected:
CToolTipCtrl m_ToolTip;
void InitToolTip();
//{{AFX_MSG(CHoverButton)
afx_msg void OnMouseMove(UINT nFlags, CPoint point);
afx_msg LRESULT OnMouseLeave(WPARAM wparam, LPARAM lparam);
afx_msg LRESULT OnMouseHover(WPARAM wparam, LPARAM lparam) ;
//}}AFX_MSG

DECLARE_MESSAGE_MAP()

And in HoverButton.cpp

LRESULT CHoverButton::OnMouseHover(WPARAM wparam, LPARAM lparam)
{
// TODO: Add your message handler code here and/or call default
m_bHover=TRUE;
Invalidate();
return 0;
}

LRESULT CHoverButton::OnMouseLeave(WPARAM wparam, LPARAM lparam)
{
m_bTracking = FALSE;
m_bHover=FALSE;
Invalidate();
return 0;
}

H.J.Jo in Seoul, South Korea.

Re: Problem compiling example in VC++ 7

Just_a_girl15-May-04 22:58

15-May-04 22:58

I tried this in .NET and get these errors:

warning C4996: 'CWinApp::Enable3dControls' was declared deprecated

error C2556: 'LRESULT CHoverButton::OnMouseHover(WPARAM,LPARAM)' : overloaded function differs only by return type from 'void CHoverButton::OnMouseHover(WPARAM,LPARAM)'

error C2371: 'CHoverButton::OnMouseHover' : redefinition; different basic types

Re: Problem compiling example in VC++ 7

ihawley19-Jul-04 22:58

19-Jul-04 22:58

All older App Wizard generated projects include the CWinApp::Enable3dControls() call to well, enable 3d controls. However with the latest version of .net and VC++'s associated libraries this appears to be unnecessary and so use of this function genrates a warning, although in truth I presume there is no harm in it's inclusion. As such, however, all projects containing the call that are migrated to .net (2003 at least) will produce this warning.

Other than that, it appears that .net 2003 is more rigorous with it's ON_MESSAGE() macro and consequently the return type for the CHoverButton::OnMouseHover() should be an LRESULT and not a void. Changing this fixes the problems and it compiles without any trouble. The above issues are issues to do with migration of the project/code to .net.

As already stated the slight flicker on the control can be avoided by handling WM_ERASEBKGND message, although you may still get a little "tearing", more noticeable on much larger buttons I imagine.

To eliminate all such artifcats, the only real way to handle it is ti blit the image to the screen during the vertical blank. This is problemtic at best and so handling the WM_ERASEBKGND is the cheaper and more acceptable solution.

Generally speaking, painting each pixel only once will provide the least flicker!

Smile | :)

Smile | :)

IMH

TrackMouseEvent

shinay19-Jul-03 11:57

19-Jul-03 11:57

In side of this project I can call this function.
But When I try to use in side of my own project
I have an error saying this function is not
defined. Is there any library or .h file
I have to include in order to get it running?

Let me know and thanks for your help in advance.

Shinya

Re: TrackMouseEvent

Anonymous25-Aug-03 22:04

25-Aug-03 22:04

perhaps you try using TrackMouseEvent instead of _TrackMouseEvent (not the underscore).

General News Suggestion Question Bug Answer Joke Praise Rant Admin

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Go to top