Mouseover highlights label text - how?

I'm actually flattered that people have taken the time to post solutions, although it's true, I did expect there to be an easy solution for a simple side menu, something used in many, many programs.

Thanks again for all your help so far guys.

Sorry for replying to a old topic but you could do it like this.

Create a label array called toolLink

Change the colour to blue

then add this code to the code window

vb Code:

Private Sub toolLink_DragOver(Index As Integer, Source As Control, X As Single, Y As Single, State As Integer)
On Error Resume Next
If State = vbLeave Then
With toolLink(Index)
.Drag vbEndDrag
.ForeColor = vbBlue
End With
End If
End Sub
 
Private Sub toolLink_MouseMove(Index As Integer, Button As Integer, Shift As Integer, X As Single, Y As Single)
On Error Resume Next
With toolLink(Index)
.ForeColor = vbRed
.Drag vbBeginDrag
End With
End Sub

Iv attached a copy of it.

P.S not my code found it in a project thing i downloaded, don't know who the person is but his site is www.crapsoft.org and just got rid of the rubbish.

Thanks for that, I'll take a look. Anyone see any problems with this code, it looks very small? Would it suffer the same problems that the other label-based code does as Hack mentioned in an earlier post?

It was a bit bigger and had some other things, but it didn't need them so i deleted it. But i can send you the origonal code if you want.

Does the highlight box have to stay on the form if we use this method? I really don't like that effect.

Also how can the clicked label stay red?

No you can get rid of it. Sorry forgot it was there.

Try this attatched.

Sorry for the late reply Banjo. Looks pretty good and very small. So if I use this method, I would like to have the selected link turn red on hover (like now) but stay red when selected. Is there a simple way to achieve this?

Im not sure how you could do that. Maybe on a click event or something have

Code:

---

Label1.BackColor = vbRed

---

and on the other labels something like this

Code:

---

If Label1.BackColor = vbRed then
Label1.BackColor = vbBlue
End If

---

There is probally a better way though.

Quote:

---

Originally Posted by Vero44

Sorry for the late reply Banjo. Looks pretty good and very small. So if I use this method, I would like to have the selected link turn red on hover (like now) but stay red when selected. Is there a simple way to achieve this?

---

I know it's a bit late, but if you're still intrested in something like the antimalware program uses, have a look at the attachment.

The code still needs some finetuning, but I think everything works.

Thanks Jottum. It's certainly an attractive menu label but there's a lot of code in the control I don't understand. I added a second button that didn't change on mouseover or click so I imagine the code would need changing for every button to work.

I'm really trying to simplify things for my basic level of programming so not sure I can modify this. Thanks for sharing the code though. Are you (or anyone) able to mod it so I can see it work on, say, 8 labels because I might use it then?

What is involved when you have a bespoke control like this MenuLabel.ctl? Can I still compile it and get it to work in safe mode, PE mode and in Win95 to Vista or does it have any extra dependencies?

Quote:

---

Originally Posted by Vero44

Thanks Jottum. It's certainly an attractive menu label but there's a lot of code in the control I don't understand. I added a second button that didn't change on mouseover or click so I imagine the code would need changing for every button to work.

I'm really trying to simplify things for my basic level of programming so not sure I can modify this. Thanks for sharing the code though. Are you (or anyone) able to mod it so I can see it work on, say, 8 labels because I might use it then?

What is involved when you have a bespoke control like this MenuLabel.ctl? Can I still compile it and get it to work in safe mode, PE mode and in Win95 to Vista or does it have any extra dependencies?

---

Hi,

You're welcome. The version I posted, still needed quite some work, but I wanted you to have a choise before to much effort had gone in another approach.

The version now attached is much better and you should be able to configure one Menulabe the way you want and then copy and paste exact copies of it.

Whether or not you can use it, is something only you can judge and either way is Ok with me. :)

I think - note THINK :) - it has nothing that 95 would choke on, but running attached sample on a 95 machine will give you a certain answer.

The attached version has nicer default colors, a pushed state when "boxed", a text hover color, selected button will be remembered when you "tab" to the next, focus rect is better aligned, text is better aligned, LabelImage loading is better now and more little things that just were'nt ready. I also added a transparent container, just for the heck of it. :)

There's probably more I've missed, if anyone wants to use it, just let me know what isn't right and I'll fix it.

If you are going to test it on 95, let me know if it works or not. It does run on XP and Vista, I'm developing on a Vista box and just test on XP to be sure.

Take care,

Very nice and an excellent demo Jottum.

So a few questions:

1. How do I control the size of the image or do I need to resize the image to suit?

2. How can I get the label image to be 'hoverable' as the label text is, eg change the label colour? Many users would click the icon not the text.

3. How do I add this control in to my project, simply with Project > Add User Control?

Quote:

---

Originally Posted by Vero44

Very nice and an excellent demo Jottum.

---

Thank you, the basis of this MenuLabel is the vbKeys link control.

Quote:

---

Originally Posted by Vero44

So a few questions:

1. How do I control the size of the image or do I need to resize the image to suit?

---

Right now you would have to change the image control's size that rests on the usercontrol, but I'm thinking about adding a routine that will draw any (compatible) image you load directly onto the UC's DC. The size won't be problem anymore that way.

Quote:

---

Originally Posted by Vero44

2. How can I get the label image to be 'hoverable' as the label text is, eg change the label colour? Many users would click the icon not the text.

---

The easiest way would be to add more then one label image, disabled, hover and normal for instance. It is possible to do this all by code, but that would be a lot of work and results in a much larger code. I have no intentions going that way. :)

Quote:

---

Originally Posted by Vero44

3. How do I add this control in to my project, simply with Project > Add User Control?

---

Yes, you should only have to load the MenuLabel control, unless you want to use the transparent container I've added for this sample project, you would have to add 2 files in that case.

With respect to question 2, I didn't want the icon to change, just to have the label's text colour change when hovering over the icon or clicking it.

This is possibly a bug as it works some times and not others.
I have been using the 4th label down with an icon of my own. For testing, try moving the mouse on and off the icon, sometimes it doesn't highlight. Is this the label bug Hack referred to earlier in this post?

Quote:

---

Originally Posted by Vero44

With respect to question 2, I didn't want the icon to change, just to have the label's text colour change when hovering over the icon or clicking it.

---

Well, you're getting more then you're bargained for. :)

Quote:

---

Originally Posted by Vero44

This is possibly a bug as it works some times and not others.

---

I can't reproduce that behaviour, so long as you haven't clicked a MenuLabel, the entire control responds to a mouse move and updates the hover colors.

Quote:

---

Originally Posted by Vero44

I have been using the 4th label down with an icon of my own. For testing, try moving the mouse on and off the icon, sometimes it doesn't highlight. Is this the label bug Hack referred to earlier in this post?

---

I've got almost RSI from trying ;), but it always works as expected, which is odd while you have this problem.

Anyways, I've made some changes, the Image control is gone, the drawing is done directly onto the DC now. I've added two more images, one for the disabled state and on when you hover over the label.

They're all optional, the attached demo project uses them all. The size no longer matters, I'm using 48 x 48 images now.

There still can be issues, tho I haven't found anymore then I already did.

Let me know what you think and if the hover bug is still there.

Take care,

Quote:

---

Originally Posted by Vero44

With respect to question 2, I didn't want the icon to change, just to have the label's text colour change when hovering over the icon or clicking it.

---

PS
It must have been the Image control blocking the mouse move from the UC. That's why I couldn't reproduce it, I had it already removed when I read your post.

Now that's exactly what I'm after Jottum. Will try to incorporate this into my project and test as much as possible on different O/S. Thanks for your help so far.

Quote:

---

Originally Posted by Vero44

Now that's exactly what I'm after Jottum. Will try to incorporate this into my project and test as much as possible on different O/S. Thanks for your help so far.

---

You're welcome, perhaps it can save you a lot of work if you compile the demo project and test that on as many OS's you can. While you do that, I can "polish" the UC, add all the missing Procedure Attributes and add proper credits to the parts of the code I didn't wrote.

I'll get on with that anyway and if no one reports any bugs, reply here again with the final version when I'm finished.

Quote:

---

Originally Posted by Jottum

I'll get on with that anyway and if no one reports any bugs, reply here again with the final version when I'm finished.

---

That would be cool, and post your final project in our CodeBank (source code only - no compiled code please :) )

Quote:

---

Originally Posted by Hack

That would be cool, and post your final project in our CodeBank (source code only - no compiled code please :) )

---

Will do and won't do. ;)

Can I get the correct method to load these controls into my project please?

I currently copy MenuLabel.ctl and TransContainer.ctl into the folder I am working in that contains my forms. I select Project, then Add User Control and navigate to MenuLabel.ctl. I repeat for TransContainer.ctl. I double click the icon and get an 'error during load' Msgbox. In the menulabel.log:

"Line 11: Property ToolboxBitmap in MenuLabel had an invalid file reference."

Presumably this relates to something on your hard drive? Same error for TransContainer.log.

Is this the correct way to load the controls?

What do I need to do to duplicate the lower menu label in your demo? Is there an easy way to copy the attributes?

Quote:

---

Originally Posted by Hack

That would be cool, and post your final project in our CodeBank (source code only - no compiled code please :) )

---

Hi,

I think the control is ready, it would be nice if someone is willing to put it through a "stress test". I've found a few things myself that I had forgotten or behaved unexpected. I also made some improvements and got rid of unneccesary code.

I'm also intrested to know if the control is easy to use and if its properties need more explanation. Like most programmers, I don't like writing manuals, no matter how small. :) But I will if advisable.

TIA

Cheers Jottum, nicer demo every time!

Can you clarify how I add the controls to a project please?

Quote:

---

Originally Posted by Vero44

Cheers Jottum, nicer demo every time!

Can you clarify how I add the controls to a project please?

---

Thanks, simple just add MenuLabel.ctl into a project through the Project Menu and you're done . No other files needed. If you want to use the Transcontainer as well, just add that too. If you want the toolbox bitmaps in the IDE, don't forget to put the ctx files in the same folder as the ctl files are.

HTH

Still get the error messages listed in my post #61 above when I simply add the control.

Quote:

---

Originally Posted by Vero44

Still get the error messages listed in my post #61 above when I simply add the control.

---

I'm sorry I've missed that post, really don't know why that happes, but I'll attach the original bmp files.

Just delete the ctx files, click away any complaining from vb about the ctx files.

Copy attached bitmaps to a folder first BTW, now select the usercontrol click the View Object button in the Properties window, scroll down to ToolboxBitmap, Select it, click the browse button, browse to the bmp you need and repeat for the other usercontrol.

That should solve it, but it's weird this happens...

HTH

That seems to work, it shows the icon in the toolbox now.

How do I achieve the following?:

1. Resize the images - is it by resizing the actual file or can it be done in the control?

2. Align the label's text with the middle of the icon. Using your configurator.gif as an example, if I drop the y position of the icon and attempt to reduce the label's height by dragging the handles, the label text drops too low.

3. Make the label transparent as in your bottom demo label

I can answer 3 now. Set DrawBox and FillBox to false in Menulabel's properties

Quote:

---

Originally Posted by Vero44

That seems to work, it shows the icon in the toolbox now.

---

Glad you've got that solved.

Quote:

---

Originally Posted by Vero44

How do I achieve the following?:

1. Resize the images - is it by resizing the actual file or can it be done in the control?

---

I think we should make a wish list, ;) I didn't implement image resizing, which is by design. I created the control from the image/application you've linked to earlier in this thread.

If that's what you want I will look in to it tomorrow, shouldn't be to hard hopefully.

Quote:

---

Originally Posted by Vero44

2. Align the label's text with the middle of the icon. Using your configurator.gif as an example, if I drop the y position of the icon and attempt to reduce the label's height by dragging the handles, the label text drops too low.

---

That's correct, this is also because I thought you wanted the image as in said link. I think I can make it optional and shrink the control from the top accordingly if you don't want it, as if it appears to be half over the MenuLabel. It's number two on my list.

Quote:

---

Originally Posted by Vero44

3. Make the label transparent as in your bottom demo label

---

You've found that one I saw below. I'll get on with the other two requests an post here again when I've got it finished. I think it wont be to hard, but I won't know for sure until I start working on it.

If you have more requests, or run into bugs, (not features :D ) post them here. Maybe I can do it all before the next "release".

HTH

Quote:

---

Originally Posted by Vero44

That seems to work, it shows the icon in the toolbox now.

How do I achieve the following?:

1. Resize the images - is it by resizing the actual file or can it be done in the control?

2. Align the label's text with the middle of the icon. Using your configurator.gif as an example, if I drop the y position of the icon and attempt to reduce the label's height by dragging the handles, the label text drops too low.

3. Make the label transparent as in your bottom demo label

---

Hi,

I've made the changes you've requested, hopefully in a way you like.

I've added a few properties because of this - and some others - and one of them I call FloatingImage.

If True, the control looks like it was initially, if False, the image is vertically centered on the control, just like its Caption and there is no transparent part on the top of the control. This means you can only change the image's xOffSet if you don't want a "Floating" image. It was either this or manually vCenter images and I doubt you would want it vertically "misplaced" anyway.

You can now specify the width and Height of your image, the control will either stretch or crop to the new values. The result of this isn't spectacular as you probably can imagine. First of all MenuLabel isn't exactly a PhotoShop clone ;). Secondly because of the size of the images, there isn't much to work with.

I've made a properties demo page on the demo project - see screenshot - that lets you play with the most importent settings, without the need to change anything in code and then look at the result.

I also added a boolean property that enables you to show or not show the push down state.

Because you can configure MenuLabel to be transparent and with only the border visible and if that button is also the selected button, there is no visible mouseover effect. I added a boolean property that will change the border color to the same color as the mouseover text color. This only works if Fillbox = False.

Because I mixed up an X and Y variable, the previous version didn't remember the Y image position (I think it was), that's fixed as well now.

I hope all the coding didn't introduce new bugs, but it looks like we're getting there.

Let me know what you think.

It probably just has to be like this. :) You've noticed without doubt that the last button on the demo project keeps the selected color?

That's fixed now, but I'll wait for your findings before posting yet another update.

Note for moderators:

Would you like me to remove the older attachments?

Thanks Jottum, will try to break it over the next few days ;-)

How do I remove the user control and add the latest to my project. Thought I managed to do it before but can't seem to do it now without creating a new project.

Quote:

---

Originally Posted by Vero44

Thanks Jottum, will try to break it over the next few days ;-)

---

:) Probably won't take that long.

Quote:

---

Originally Posted by Vero44

How do I remove the user control and add the latest to my project. Thought I managed to do it before but can't seem to do it now without creating a new project.

---

You should be able to copy the new MenuLabel.ctl and overwrite the old one without problems. But you better try that first with a copy of you code. :rolleyes:

Quote:

---

Originally Posted by Vero44

Thanks Jottum, will try to break it over the next few days ;-)

How do I remove the user control and add the latest to my project. Thought I managed to do it before but can't seem to do it now without creating a new project.

---

Hi,

I'm not going to say the control is finished, but really hope this version comes real close.

I also noticed the yOffSet textbox on the demo project was disabled when it shouldn't and the other way around. :D Fixed that too.

The selection now also clears after you've pressed the test MenuLabel and click on main menulabels. While trying to figure out why that occured, I realised it was impossible to put two groups of Menulabels on the same container and have a selected one in each group.

So, I added yet another property, GroupName that can hold a string that identifies the group a MenuLabel belongs to. In the Demo project I called the group; MainMenu, and the single "Configure Me" MenuLabel; TestLabel. This doesn't do anything in this paricular setup, it's just to uhm... well, demonstrate. :bigyello:

Have fun with it, I really hope it works OK now.

Quote:

---

Originally Posted by Vero44

Thanks Jottum, will try to break it over the next few days ;-)

How do I remove the user control and add the latest to my project. Thought I managed to do it before but can't seem to do it now without creating a new project.

---

Hi,

I hope your silence isn't a bad sign. :)

I don't know if you ran into the small issues that still existed in the previous version I've posted, but I've found a few while cleaning up the code for the final version.

I've made a few improvements, for instance when the MenuLabel has a Floating image, the control only responses to mouse events, when it is over the "box" part. It looked rather silly you could click on a part that appeared to be the form and the Menulabel got pressed. This adds to the illusion the image rests partially on the control. The only thing that still happens now, is that the MenuLabel will get the focus.

I also moved the actual execution of the mouse click to the MouseUp event, this way you can drag the mouse pointer away from the control without a click. I think that makes more sense. I removed the double code that was created when I added the Floating image property.

I've been working on the demo project too, the interface looks much better now and I’ve cleaned up the code to make it more readable, and added more comments. I also added simple help on the Properties Demo page, hopefully that makes a few things clearer.

Unless you come up with anything that needs to be changed or fixed, I will consider this project as finished. I’ll attach the final version and will wait a couple of days before adding it to the codebank.

Enjoy,

Thanks again Jottum. I'm actually bogged down with work at the moment so haven't got the time to test, rest assured I will when I can and report back here.

This is more than worthy as it stands now to be in the codebank, there was no 'off the shelf' code for a simple but good-looking VB6 menu that I could find anywhere.

Quote:

---

Originally Posted by Vero44

Thanks again Jottum. I'm actually bogged down with work at the moment so haven't got the time to test, rest assured I will when I can and report back here.

---

No worries, take your time. :)

Quote:

---

Originally Posted by Vero44

This is more than worthy as it stands now to be in the codebank, there was no 'off the shelf' code for a simple but good-looking VB6 menu that I could find anywhere.

---

I will just wait for your findings, it can wait to be added to the codebank.

Take care,

Quickly looked at the latest demo, a quick query:

For my purposes, just loading all 3 images and checking 'Transparent' and 'Enabled' achieves everything except highlighting the text on mouseover. Is this just the demo that requires changing or does the new code achieve this? As I said, will test it ASAP, just thought I'd ask (it is, after all, the title of this thread :bigyello: :bigyello: ).

OK, quick test in my lunchbreak. Looks good but 2 errors I can see.

1. The error we talked about before (the control's bitmap not loading which requires a manual load).

2. Create a label that uses your 48x48 configurator.gif as an icon, normal, down and hover bitmaps set. Set Drawbox, Fillbox, Floating Image to false. Set the LabelImageXwidth and LabelImageXheight to 24 each (my ideal icon size). Now resize the label on the form. The icon gets cut by the label's 'frame'. Using LabelImageY I can set the icon to look better on the form but at runtime it is moved to the original 'chopped off' position and, strangely, when ending the program, the previous LabelImageY is shown.

Any ideas?

Quote:

---

Originally Posted by Vero44

Quickly looked at the latest demo, a quick query:

For my purposes, just loading all 3 images and checking 'Transparent' and 'Enabled' achieves everything except highlighting the text on mouseover. Is this just the demo that requires changing or does the new code achieve this? As I said, will test it ASAP, just thought I'd ask (it is, after all, the title of this thread :bigyello: :bigyello: ).

---

When you place a new instance of a MenuLabel on a form, it has all the above settings by default. Perhaps what is misleading in the demo, the "Configure Me" button is the only one in its "group". If you click it, it becomes the selected one and obvously stays that way. If you now hover the mouse over the MenuLabel, you don't see the caption highlighted, because it is already that color.

I think that is what you mean? I'll change that in the demo, so you can still see the caption getting changed when you hover your mouse after it gets selected.

Again, take your time, I'm in no hurry. :)