How to make a picture button with triggers in QT

Question

I'm just starting to learn QT and I really need some help. I want to make a button out of (just) an Image (not showing any border or outline), and I also need to be able to change the image when the mouse is hovering over the image and off the image. Any help?

You need to look at [Qt Quick](https://doc.qt.io/qt-5/qml-qtquick-controls-toolbutton.html). — Vladimir Bershov, Feb 26 '16 at 18:50
I mean QML at all. Maybe some other class, like [Button](https://doc.qt.io/qt-5/qml-qtquick-controls-button.html), but the [QML framework](https://doc.qt.io/qt-5/qtqml-index.html) is exactly what you need. — Vladimir Bershov, Feb 26 '16 at 19:24
@VladimirBershov I was kind of looking for a specific solution. — Luke Dinkler, Feb 26 '16 at 19:58
@VladimirBershov, absolutely not necessarily to look at Qt Quick only, Qt widgets can do that for sure. — Alexander V, Feb 27 '16 at 00:34
@LukeDinkler, AlexanderVX has added the easiest solution for you — Vladimir Bershov, Feb 27 '16 at 06:41

score 2 · Answer 1 · edited May 23 '17 at 12:07

2

I want to make a button out of (just) an Image (not showing any border or outline), and I also need to be able to change the image when the mouse is hovering over the image and off the image. Any help?

Maybe the easiest way to accomplish that is with QPushButton:

// the button has to be somehow initialized and maybe added to layout
QPushButton* pMyPushButton = new QPushButton(this);
layout()->AddWidget(pMyPushButton);

// try style it like that
// the concrete example limits the scope to pMyPushButton object 
pMyPushButton->setStyleSheet(
    "QPushButton {"
        "background: transparent;"
        "image: url(res/images/normal_bn_image.png);"
    "}"
    "QPushButton:hover {"
        "image: url(res/images/hover_bn_image.png);"
    "}"
  );

Make sure to provide correct URLs to images. Maybe this clarifies on image resources a bit: Unable to set the background image in Qt Stylesheet

edited May 23 '17 at 12:07

Community

1
1

answered Feb 27 '16 at 00:42

Alexander V

8,351
4
38
47

Yes, you are right ;) – Vladimir Bershov Feb 27 '16 at 06:38
This looks great! I'll try it and confirm when I get the chance. Thanks! – Luke Dinkler Feb 27 '16 at 14:53
@AlexanderVX adding this to my MainWindow function creates _so_ many errors! It just looks like the syntax is really messed up. – Luke Dinkler Feb 27 '16 at 17:52
The code is very trivial and can be added to constructor of MainWindow class. Of course you should be aware of the layout if it is already created and the button. It seems like you have quite a lot ahead of you to learn? You can have a look at something like: http://stackoverflow.com/questions/17989231/how-to-add-buttons-to-a-main-window-in-qt – Alexander V Feb 27 '16 at 21:10

How to make a picture button with triggers in QT

1 Answers1