CHoverButton - A simple hoverbutton with one bitmap and a tooltip

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 you 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 it's 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

About the Author

Niek Albers

Web Developer

Netherlands

Member

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.

Article Top

Poor

Excellent

Add a reason or comment to your vote: x
Votes of 3 or less require a comment

Comments and Discussions

You must Sign In to use this message board. (secure sign-in)

Search this forum
	Profile popups Noise Layout Per page

Enable/Disable Issue with IE9

HydGuy

3:48 31 Jan '12

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
Sign In·View Thread·Permalink

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

Christoph Conrad

0:57 26 Jul '10

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
Sign In·View Thread·Permalink

Text "Click me" not shown

the Jimmy

20:10 21 Feb '07

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

yjnevergone

5:36 5 Apr '09

LRESULT CHoverButton::OnMouseLeave(WPARAM wparam, LPARAM lparam) { m_bTracking = FALSE; m_bHover=FALSE; ActivateTooltip(FALSE); ActivateTooltip(TRUE); Invalidate(); return 0; }
Sign In·View Thread·Permalink

text over bitmap

tyounsi

14:07 2 Jan '07

It might be interesting to support overlay of text as well.. Cheers
Sign In·View Thread·Permalink

load image from file [modified]

a.damm

21:51 7 Aug '06

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

Gismow

22:10 26 Jul '06

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 sakura

1:59 7 Jul '06

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 Applet codes of your web page is as follow: <applet code="fphover.class" codebase="./" width="120" height="24"> </applet> nothing
Sign In·View Thread·Permalink	1.00/5 (1 vote)

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

ac sakura

1:53 7 Jul '06

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"> </applet> nothing
Sign In·View Thread·Permalink	1.00/5 (1 vote)

Slightly Off Topic

69 Bay

6:26 4 Jul '06

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
Sign In·View Thread·Permalink	3.67/5 (3 votes)

tooltips

ramyasangeet

21:52 8 Mar '06

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
Sign In·View Thread·Permalink

dinamic creation

Max Santos

14:09 8 Feb '06

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?
Sign In·View Thread·Permalink

Button Not Showing up

tweetpiyo

7:15 6 Feb '06

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.
Sign In·View Thread·Permalink	1.00/5 (3 votes)

Minor improvement - transparent background

Hans Dietrich

9:11 5 Sep '04

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 Beeks

3:32 25 Jun '05

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

Sims

0:36 11 Aug '05

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
Sign In·View Thread·Permalink

Re: Minor improvement - transparent background

newofilms

15:04 7 Dec '05

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)

{

	mybitmap.Attach(::LoadImage(::AfxGetInstanceHandle(),MAKEINTRESOURCE(bitmapid), IMAGE_BITMAP,0,0,LR_LOADMAP3DCOLORS));

	BITMAP	bitmapbits;

	mybitmap.GetBitmap(&bitmapbits);

	m_ButtonSize.cy=bitmapbits.bmHeight;

	m_ButtonSize.cx=bitmapbits.bmWidth/3;

 

        // *****  new code  *****

	//Set Background colored pixels to dialog background color

	CDC cdcBitmap;

	COLORREF rgbButtonFace = ::GetSysColor(COLOR_BTNFACE);

	COLORREF rgbTransparentColor;

	COLORREF rgbPixel;

 

	cdcBitmap.CreateCompatibleDC(NULL);

	cdcBitmap.SelectObject(mybitmap);

	rgbTransparentColor = cdcBitmap.GetPixel(0, 0);

	for (int x = 0; x < bitmapbits.bmWidth; x++)

	{

		for (int y = 0; y < bitmapbits.bmHeight; y++)

		{

			rgbPixel = cdcBitmap.GetPixel(x, y);

			if (rgbPixel == rgbTransparentColor)

			{

				cdcBitmap.SetPixel(x, y, rgbButtonFace);

			}

		}

	}

	cdcBitmap.DeleteDC();

        // *****  end of new code  *****

 

	SetWindowPos( NULL, 0,0, m_ButtonSize.cx,m_ButtonSize.cy,SWP_NOMOVE   |SWP_NOOWNERZORDER   );

	return TRUE;

}

Stephen.

Button as Hyperlink in MFC

SunilJoshi_MCA

1:59 24 Mar '04

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
Sign In·View Thread·Permalink

Something maybe better!

Tailor

21:06 28 Feb '04

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?
Sign In·View Thread·Permalink	1.00/5 (1 vote)

Problem compiling example in VC++ 7

Sick@work

2:34 4 Nov '03

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.
Sign In·View Thread·Permalink

Re: Problem compiling example in VC++ 7

HJ Jo

1:57 12 Dec '03

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_girl

22:58 15 May '04

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
Sign In·View Thread·Permalink

Re: Problem compiling example in VC++ 7

ihawley

22:58 19 Jul '04

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 | :)

IMH

TrackMouseEvent

shinay

11:57 19 Jul '03

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
Sign In·View Thread·Permalink