Results 1 to 6 of 6

Thread: change image source when mouse over

  1. #1
    Join Date
    Oct 2014
    Posts
    104
    Thanks
    16
    Thanked 1 Time in 1 Post
    Qt products
    Qt5
    Platforms
    Unix/X11 Windows

    Default change image source when mouse over

    Hi,

    Please help me how to properly implement mouse over in this item
    I'm stuck here, i don't know where to put the hover

    The hover filename is "level-on-over-vertical.png" and "level-off-over-vertical.png"
    Once disabled == true, hover should not be working

    Qt Code:
    1. Item
    2. {
    3. id: levelItem
    4. anchors.leftMargin: 30
    5. anchors.fill: parent
    6.  
    7. Row
    8. {
    9. id: levelRow
    10.  
    11. Repeater
    12. {
    13. id:levelRepeater
    14. model: 15
    15.  
    16. Image {
    17. source: "../images/level-" + fillSource() + "vertical.png"
    18. id: levelImg
    19. fillMode: Image.PreserveAspectFit
    20.  
    21. function fillSource() {
    22. var source
    23. if (!disabled) {
    24. source = index <= level? "on-" : "off-"
    25. } else {
    26. source = index <= level? "disabled-" : "off-"
    27. }
    28. return source
    29. }
    30. }
    31.  
    32.  
    33. }
    34. }
    35.  
    36. MouseArea
    37. {
    38. id: levelArea
    39. anchors.fill: levelRow
    40. function xToIndex(xPos) { return xPos/25 }
    41. function setDisabled(xPos){
    42. if (disabled)
    43. disabled= !disabled
    44. level= xToIndex(xPos)
    45. }
    46. onClicked: setDisabled(mouse.x)
    47. onPositionChanged: {
    48. if ((mouse.x >= 0 && mouse.x <= 375) &&
    49. (mouse.y >= 0 && mouse.y <= 55)) {
    50. level= xToIndex(mouse.x);
    51. }
    52. }
    53. }
    54.  
    55. }
    To copy to clipboard, switch view to plain text mode 

    Any help is greatly appreciated. TIA.

  2. #2
    Join Date
    Jan 2006
    Location
    Warsaw, Poland
    Posts
    33,359
    Thanks
    3
    Thanked 5,015 Times in 4,792 Posts
    Qt products
    Qt3 Qt4 Qt5 Qt/Embedded
    Platforms
    Unix/X11 Windows Android Maemo/MeeGo
    Wiki edits
    10

    Default Re: change image source when mouse over

    You have definitely too much imperative code. This is not C++.

    javascript Code:
    1. Item {
    2. id: root
    3. property bool hoverDisabled: false
    4. Image {
    5. source: ma.containsMouse ? "level-on-over-vertical.png" : "level-off-over-vertical.png"
    6. MouseArea {
    7. id: ma
    8. enabled: !root.hoverDisabled
    9. hoverEnabled: true
    10. anchors.fill: parent
    11. }
    12. }
    13. }
    To copy to clipboard, switch view to plain text mode 
    Your biological and technological distinctiveness will be added to our own. Resistance is futile.

    Please ask Qt related questions on the forum and not using private messages or visitor messages.


  3. #3
    Join Date
    Oct 2014
    Posts
    104
    Thanks
    16
    Thanked 1 Time in 1 Post
    Qt products
    Qt5
    Platforms
    Unix/X11 Windows

    Default Re: change image source when mouse over

    Quote Originally Posted by wysota View Post
    You have definitely too much imperative code. This is not C++.
    Thank you for your quick response.

    I have tried this code, however I encountered an error where it can't find the file.
    That is why I resorted to creating a function

    Qt Code:
    1. Image {
    2. readonly property string over: imgArea.pressed || imgArea.containsMouse ? "over-" : ""
    3. readonly property string onOff: index <= volume ? "on-" : "off-"
    4. readonly property string dsabled: index <= volume ? "disabled-" : "off-"
    5. id: levelImg
    6. source: "../images/level-" + !disabled ? (onOff + over) : dsabled + "vertical.png"
    7. fillMode: Image.PreserveAspectFit
    8.  
    9. MouseArea {
    10. id: imgArea
    11. enabled: disabled ? false : true
    12. hoverEnabled: true
    13. anchors.fill: parent
    14. }
    15. }
    To copy to clipboard, switch view to plain text mode 

  4. #4
    Join Date
    Jan 2006
    Location
    Warsaw, Poland
    Posts
    33,359
    Thanks
    3
    Thanked 5,015 Times in 4,792 Posts
    Qt products
    Qt3 Qt4 Qt5 Qt/Embedded
    Platforms
    Unix/X11 Windows Android Maemo/MeeGo
    Wiki edits
    10

    Default Re: change image source when mouse over

    If it couldn't find a file then you provided an incorrect URL for it. Using or not using a function doesn't matter here.

    Is this something that you wanted to do?

    javascript Code:
    1. import QtQuick 2.3
    2. import QtQuick.Controls 1.0
    3.  
    4. Item {
    5. id: root
    6. width: 800
    7. height: 200
    8.  
    9. property int currentLevel: 0
    10. property int levelUnderMouse: -1
    11. property bool indicatorEnabled: true
    12. property int maxLevel: 10
    13.  
    14. Button {
    15. checkable: true
    16. checked: true
    17. text: "Enabled"
    18. anchors.left: parent.left
    19. anchors.top: parent.top
    20. onCheckedChanged: indicatorEnabled = checked
    21. }
    22.  
    23. function urlForState(disabled, hover, active) {
    24. // put your logic here
    25. if(disabled && active) "http://www.qtcentre.org/images/reputation/reputation_highneg.png"
    26. if(disabled) return "http://www.qtcentre.org/images/reputation/reputation_neg.png"
    27.  
    28. if(active) return "http://www.qtcentre.org/images/reputation/reputation_pos.png"
    29. if(hover) return "http://www.qtcentre.org/images/reputation/reputation_pos.png"
    30. return "http://www.qtcentre.org/images/reputation/reputation_highpos.png"
    31. }
    32.  
    33. Item {
    34. anchors.centerIn:parent
    35. width: row.width
    36. height: row.height
    37. scale: 4
    38. Row {
    39. id: row
    40. spacing: 2
    41. Repeater {
    42. model: root.maxLevel
    43. Image {
    44. source: root.urlForState(!indicatorEnabled, index === levelUnderMouse, currentLevel >= index)
    45. }
    46. }
    47. }
    48. MouseArea {
    49. anchors.fill: row
    50. hoverEnabled: true
    51. enabled: !root.disabled
    52.  
    53. function xToIndex(xPos) { return xPos/row.width*root.maxLevel }
    54. onClicked: {
    55. root.currentLevel = xToIndex(mouse.x)
    56. }
    57. onPositionChanged: {
    58. var idx = xToIndex(mouse.x)
    59. root.levelUnderMouse = idx
    60. if(pressed)
    61. root.currentLevel = idx
    62. }
    63. onExited: root.levelUnderMouse = -1
    64. }
    65. }
    66. }
    To copy to clipboard, switch view to plain text mode 
    Your biological and technological distinctiveness will be added to our own. Resistance is futile.

    Please ask Qt related questions on the forum and not using private messages or visitor messages.


  5. The following user says thank you to wysota for this useful post:

    joko (11th December 2014)

  6. #5
    Join Date
    Oct 2014
    Posts
    104
    Thanks
    16
    Thanked 1 Time in 1 Post
    Qt products
    Qt5
    Platforms
    Unix/X11 Windows

    Default Re: change image source when mouse over

    Quote Originally Posted by wysota View Post
    If it couldn't find a file then you provided an incorrect URL for it. Using or not using a function doesn't matter here.

    Is this something that you wanted to do?
    Thank you very much wysota!

  7. #6
    Join Date
    Sep 2015
    Posts
    6
    Qt products
    Qt5
    Platforms
    Windows

    Default Re: change image source when mouse over

    Can this be done via CSS?
    I'm trying to replace an icon on the menu and when you mouse over it will be replaced by another one with a different color.

    I'm a UI designer with limited coding knowledge, I'm trying to avoid doing anything via back-end (because everytime I do something there it needs to go through an engineer). So I'm trying to split the GUI as much as I can from the functionality code. I'm using QT creator 5.

    Also, if anyone is interested in some paid mentoring I'm looking for people, please contact danielribas1984@gmail.com

Similar Threads

  1. Change HTML source in QWebView during load
    By The_Fallen in forum Qt Programming
    Replies: 1
    Last Post: 9th August 2012, 22:29
  2. Replies: 1
    Last Post: 18th January 2012, 11:00
  3. image source changes in animation
    By vinayaka in forum Qt Quick
    Replies: 0
    Last Post: 27th September 2011, 09:31
  4. Replies: 0
    Last Post: 28th June 2011, 08:41
  5. Qt rebuilding and source change
    By jgreetham in forum Installation and Deployment
    Replies: 2
    Last Post: 12th September 2007, 18:00

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
Digia, Qt and their respective logos are trademarks of Digia Plc in Finland and/or other countries worldwide.