Image on mouse hover a button Topic is solved

Get help with using AutoHotkey (v1.1 and older) and its commands and hotkeys
PokyPok

Image on mouse hover a button

23 Apr 2017, 12:15

Hi First i am a total beginner and i need a little help for something.
I'v created a Simple GUI look like this

[Button1"image1"][Button2"image2"][Button3"image3"][Button4"image4"][Button5"image5"][Button6"image6"]

What i want is when my mouse over Button "image1" it show a image i selected,same for image2,image3 ...
I don't want the images be open by another program

my actual code

Code: Select all

; window with more elements

Gui, Show , w1000 h10, Window title
Gui, Show, x0 y980, YourWindowTitle
Gui, -Caption 
; here you have button and edit
Gui, Add, Button, x10 y10 w60 h20 vFIRSTBUTTON ,Image1
Gui, Add, Button, x70 y10 w60 h20 vFIRSTBUTTON2 ,Image2
Gui, Add, Button, x130 y10 w60 h20 vFIRSTBUTTON3 ,Image3
Gui, Add, Button, x190 y10 w60 h20 vFIRSTBUTTON4 ,Image4
Gui, Add, Button, x250 y10 w60 h20 vFIRSTBUTTON5 ,Image5
Gui, Add, Button, x310 y10 w60 h20 vFIRSTBUTTON6 ,Image6

return

GuiClose:
ExitApp
User avatar
noname
Posts: 515
Joined: 19 Nov 2013, 09:15

Re: Image on mouse hover a button

24 Apr 2017, 04:33

What i want is when my mouse over Button "image1" it show a image i selected
You should give some info where the image must be displayed.

Here is an exmple that gives you the buttonname when mouse is over it ( changed vert position of Gui because on my system it was offscreen ) :

Code: Select all



; window with more elements

Gui, +hwndhwnd
Gui, Show, x0 y480 w1000 h10, YourWindowTitle
Gui, -Caption 
; here you have button and edit
Gui, Add, Button, x10 y10 w60 h20 vFIRSTBUTTON ,Image1
Gui, Add, Button, x70 y10 w60 h20 vFIRSTBUTTON2 ,Image2
Gui, Add, Button, x130 y10 w60 h20 vFIRSTBUTTON3 ,Image3
Gui, Add, Button, x190 y10 w60 h20 vFIRSTBUTTON4 ,Image4
Gui, Add, Button, x250 y10 w60 h20 vFIRSTBUTTON5 ,Image5
Gui, Add, Button, x310 y10 w60 h20 vFIRSTBUTTON6 ,Image6

OnMessage(0x200,"OnMouseMove")
return

OnMouseMove( wParam, lParam, Msg,hwnd ) {
global tme ,status_button
DllCall( "TrackMouseEvent","uint",&tme )
status_button:=""
if instr(a_guicontrol,"BUTTON")
      {
      status_button:=a_guicontrol
      SetTimer, alert,-20
      }
}

alert:
tooltip  %status_button%
return

esc::
GuiClose:
ExitApp












PokyPok

Re: Image on mouse hover a button

24 Apr 2017, 04:55

First thanks for your help.
I try to make you a layout of what i want

+-----------------------------+
| |
| |
| |
| image display |
| |
| |
| |
| |
+--------------------------------------------------------------------------------------------------------------------------------+
[Button1"image1"][Button2"image2"][Button3"image3"][Button4"image4"][Button5"image5"][Button6"image6"]
+----------- ---------------------------------------------------------------------------------------------------------------------+

Each button display a different image on mousehover over the top left corner of the GUI
User avatar
noname
Posts: 515
Joined: 19 Nov 2013, 09:15

Re: Image on mouse hover a button

24 Apr 2017, 06:23

Are there two Gui's? The position of the buttons in your Gui " Button, x10 y10 w60 h20 " means they are at the top left.
PokyPok

Re: Image on mouse hover a button

24 Apr 2017, 06:44

Yes i think multiple GUI are the best way to do this

One GUI Bar with the buttons and multiple "Hidden" GUI one per image over the top left of the first GUI.

When you move mouse over Button the GUI"with the "image inside" corresponding to that button is "Show"
User avatar
noname
Posts: 515
Joined: 19 Nov 2013, 09:15

Re: Image on mouse hover a button

24 Apr 2017, 10:07

Code: Select all


setworkingdir %A_ScriptDir%\
; image files, if not in scriptdir use full path
images:={}
images[1]:="72362B90048100A.png"
images[2]:="d:\imgages\E361C2C300484B.png"
images[3]:="B332C23F00489B.png"
images[4]:="11282024500484F.png"
images[5]:="F151423B00481005.png"
images[6]:="15261B237004810CE.png"

loop 6
{
posx:=10+60*(A_Index-1)
Gui, Add, Button, x%posx% y10 w60 h20 vFIRSTBUTTON%A_Index% ,image%A_Index%
}
Gui, Show, x0 y680 w1000 h10, YourWindowTitle
Gui, -Caption +alwaysontop

OnMessage(0x200,"OnMouseMove")
return

OnMouseMove( wParam, lParam, Msg,hwnd ) {
global status_button

status_button:=""
if instr(a_guicontrol,"BUTTON")
      {
      status_button:=a_guicontrol
      SetTimer, alert,-20
      }
}

alert:
if (status_button=status_button_old)
return
Gui, 2:default
Gui, destroy

image_file:=images[RegExReplace( status_button,"\D")]
tooltip %image_file%
if !image_file
return

gui,2: -border -caption +toolwindow 
gui,2: color,202020
gui,2: add,picture,vpic  ,%image_file%
Gui, Show, x10 y10

status_button_old:=status_button
return


esc::
GuiClose:
ExitApp












Pokypok
Posts: 5
Joined: 24 Apr 2017, 09:27

Re: Image on mouse hover a button

24 Apr 2017, 10:28

Tested and it's working great job.
But a little problem When you put your mouse on a button the image appear,if you put your mouse a second time on the same button nothing happen.To resolve that you have to put your mouse on another button and come back on this one normal?
Last edited by Pokypok on 24 Apr 2017, 10:53, edited 1 time in total.
User avatar
noname
Posts: 515
Joined: 19 Nov 2013, 09:15

Re: Image on mouse hover a button

24 Apr 2017, 10:46

To reset the button takes some more code to see if you left the window ,sometimes this does not work if you leave to quick .....you can try this:

Code: Select all




setworkingdir %A_ScriptDir%\
; image files, if not in scriptdir use full path
images:={}
images[1]:="72362B90048100A.png"
images[2]:="E361C2C300484B.png"
images[3]:="B332C23F00489B.png"
images[4]:="11282024500484F.png"
images[5]:="F151423B00481005.png"
images[6]:="15261B237004810CE.png"

loop 6
{
posx:=10+60*(A_Index-1)
Gui, Add, Button, x%posx% y10 w60 h20 vFIRSTBUTTON%A_Index% ,image%A_Index%
}
Gui, Show, x0 y680 w1000 h10, YourWindowTitle
Gui, -Caption +alwaysontop
VarSetCapacity(tme,16,0)
NumPut(16,tme,0), NumPut(2,tme,4), NumPut(hwnd,tme,8)
OnMessage(0x2A3,"OnMouseLeave")
OnMessage(0x200,"OnMouseMove")
return

OnMouseMove( wParam, lParam, Msg,hwnd ) {
global status_button ,tme
DllCall( "TrackMouseEvent","uint",&tme )
status_button:=""
if instr(a_guicontrol,"BUTTON")
      {
      status_button:=a_guicontrol
      SetTimer, alert,-20
      }
}

alert:
if (status_button=status_button_old)
return
Gui, 2:default
Gui, destroy

image_file:=images[RegExReplace( status_button,"\D")]
if !image_file
return

gui,2: -border -caption +toolwindow 
gui,2: color,202020
gui,2: add,picture,vpic  ,%image_file%
Gui, Show, x10 y10

status_button_old:=status_button
return



OnMouseLeave(){
global
  status_button_old:=""
  }

esc::
GuiClose:
ExitApp












Pokypok
Posts: 5
Joined: 24 Apr 2017, 09:27

Re: Image on mouse hover a button

24 Apr 2017, 10:53

Now image is not disapearing when mouse left the button^^
Button can have individual name?
User avatar
noname
Posts: 515
Joined: 19 Nov 2013, 09:15

Re: Image on mouse hover a button

24 Apr 2017, 11:16

just replace OnMouseLeave function with :

Code: Select all

OnMouseLeave(){
global

Gui,2: destroy
status_button_old:=""
  }
Pokypok
Posts: 5
Joined: 24 Apr 2017, 09:27

Re: Image on mouse hover a button

24 Apr 2017, 11:27

It's Great and working
Just have to find a way to customize Buttons Text and the script is perfect.
User avatar
noname
Posts: 515
Joined: 19 Nov 2013, 09:15

Re: Image on mouse hover a button

24 Apr 2017, 11:56

Added button text array.

Code: Select all




setworkingdir %A_ScriptDir%\
; image files, if not in scriptdir use full path
images:={}
images[1]:="72362B90048100A.png"
images[2]:="E361C2C300484B.png"
images[3]:="B332C23F00489B.png"
images[4]:="11282024500484F.png"
images[5]:="F151423B00481005.png"
images[6]:="15261B237004810CE.png"

button_text:={}
button_text[1]:="one"
button_text[2]:="two"
button_text[3]:="three"
button_text[4]:="four"
button_text[5]:="five"
button_text[6]:="nine :)"

loop 6
{
posx:=10+60*(A_Index-1)
Gui, Add, Button, x%posx% y10 w60 h20 vFIRSTBUTTON%A_Index% ,% button_text[A_Index]
}
Gui, Show, x0 y680 w1000 h10, YourWindowTitle
Gui, -Caption +alwaysontop
VarSetCapacity(tme,16,0)
NumPut(16,tme,0), NumPut(2,tme,4), NumPut(hwnd,tme,8)
OnMessage(0x2A3,"OnMouseLeave")
OnMessage(0x200,"OnMouseMove")
return

OnMouseMove( wParam, lParam, Msg,hwnd ) {
global status_button ,tme
DllCall( "TrackMouseEvent","uint",&tme )
status_button:=""
if instr(a_guicontrol,"BUTTON")
      {
      status_button:=a_guicontrol
      SetTimer, alert,-20
      }
}

alert:
if (status_button=status_button_old)
return
Gui, 2:default
Gui, destroy

image_file:=images[RegExReplace( status_button,"\D")]
if !image_file
return

gui,2: -border -caption +toolwindow 
gui,2: color,202020
gui,2: add,picture,vpic  ,%image_file%
Gui, Show, x10 y10

status_button_old:=status_button
return



OnMouseLeave(){
global
Gui,2: destroy
status_button_old:=""
  }

esc::
GuiClose:
ExitApp













Return to “Ask for Help (v1)”

Who is online

Users browsing this forum: StupidIdiotMoron and 144 guests