0

I'm new to QML and I am trying to highlight an image on mouse hoover. I have a row of movie images, like this:

enter image description here

Here is my code for image number 4 (tarzan):

Rectangle{
   id:rect4
   width: parent.width/5-row.spacing/5
   height:parent.height
   color:'transparent'
   Image{
       id: tarzan
       fillMode: Image.PreserveAspectFit
       anchors.fill: parent
       source:'qrc:tarzan.jpg'
       MouseArea{
           id:area
           width:parent.width
           height: parent.height
           hoverEnabled: true
           anchors.fill:parent
           onClicked:tarzan.forceActiveFocus()
       }

I tried different ways, but nothing happens. Any ideas? Help would be appreciated.

eyllanesc
  • 235,170
  • 19
  • 170
  • 241
irena
  • 31
  • 7
  • 2
    I don't see any code that handles the hovered state. Maybe take a look at the `containsMouse` property and the `entered` and `exited` signals of the MouseArea – ParkerHalo Sep 13 '21 at 11:10
  • Okay, but why ```onClicked``` doesn't work? – irena Sep 13 '21 at 11:23
  • `onClicked` reacts on an active mouse click and it works for me. The method `.forceActiveFocus()` of Image does not hightlight the image, so you'd have to implement another way of highlighting that image – ParkerHalo Sep 13 '21 at 11:32
  • I tried ```onClicked: console.log("Button clicked!")``` and nothing happens also. – irena Sep 13 '21 at 11:35
  • Thank you for your answer. I solved it using entered and exited signals. Inside I used ```tarzan.scale=1.2``` and it worked. The image changes size when i hoover over it with mouse. – irena Sep 13 '21 at 11:57

1 Answers1

1

There are 2 ways to do this if you are using the qt quick version 2.15

import QtQuick 2.15

you can use the HoverHandler object something like this

Image{
       id: tarzan
       fillMode: Image.PreserveAspectFit
       anchors.fill: parent
       source:'qrc:tarzan.jpg'
       HoverHandler{
          onHoveredChanged: {
              if(hovered){
                  tarzan.scale = 1.2
              }
              else{
                  tarzan.scale = 1
              }
          }

      }

if you are using qtquick anything below 2.15 then your mousearea object should look something like this

Then it would be something like this the mouse area code

MouseArea{
           id:area
           width:parent.width
           height: parent.height
           hoverEnabled: true
           anchors.fill:parent
           onContainsMouseChanged: {
              if(containsMouse){
                  tarzan.scale = 1.2
              }
              else{
                  tarzan.scale = 1
              }
          }
           onClicked:tarzan.forceActiveFocus()
       }
Vinay
  • 81
  • 1
  • 8
  • 2
    why not `scale: area.containsMouse ? 1.2 : 0` before `id: tarzan` – eyllanesc Sep 13 '21 at 20:49
  • Yes, we can do this as well but, I Used the if else to keep it simple, and answer the questions using the same objects, if we make the scale of the image zero, the image would disappear hence. if you just want a zooming effect making the scale zero is not recommended – Vinay Sep 14 '21 at 07:11
  • 1
    In QML, binding is preferred over if-else since it has certain advantages such as: The code is more readable, resources are saved since the language optimizes this type of operations, etc. – eyllanesc Sep 14 '21 at 07:15