It is currently September 7th, 2024, 5:39 pm

Hovering two image

Get help with creating, editing & fixing problems with skins
User avatar
RazorX
Posts: 2
Joined: December 5th, 2022, 8:14 am

Hovering two image

Post by RazorX »

Hello Guys,

I am new to rainmeter, can someone help me to hover these two image.

i'd like to hover the image with another image, in the same coordinates or place, is it possible?
though, i'm still trying my best to find solution online :)

Image <---- while idle or not being hovered

Image <---- when mouse hover to the said image it will turn to this from the image above.

A little code i knew,
Image




Thank you,
User avatar
balala
Rainmeter Sage
Posts: 16494
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: Hovering two image

Post by balala »

RazorX wrote: December 6th, 2022, 12:38 pm A little code i knew,
Image
This is not a code, but a screenshot. Doesn't help us too much, but at least we see what you did.
The code is almost alright. There are a few small inadvertences, for instance that you didn't use the proper image in the ImageName option. The above image (the fainter one) is called image1x.png, while the darker one, which should be seen when you're hovering the mouse over is called image2x.png. Since "normally" the fainter image should be seen, use this one in the ImageName option.
So, replace the ImageName option with the one indicating the first image: ImageName=#@#Images\image1x.png.
Even if this is not mandatory, it's a good idea to immediately update the meter when either hovering the mouse over or leaving the meter and to redraw the skin. This way you'll see the image changing immediately when hovering the mouse over or leaving it. Otherwise, you have to wait to next update cycle. So add the following bangs to the MouseOverAction and MouseLeaveAction options: [!UpdateMeter "MeterImage"][!Redraw], this way:

Code: Select all

[MeterImage]
...
MouseOverAction=[!SetOption MeterImage ImageName "#@#Images\image2x.png"][!UpdateMeter "MeterImage"][!Redraw]
MouseLeaveAction=[!SetOption MeterImage ImageName "#@#Images\image1x.png"][!UpdateMeter "MeterImage"][!Redraw]
Additional comments (a recommenation): if you've placed the images into a folder (@Resources\Images in this case), you have to include the appropriate path into the ImageName option, even if you're setting the path with !SetOption bangs. There are other possibilities as well, for instance using an ImagePath option onto the meter, but I think it's much easier to add the path directly to the ImageName option. This is why your MosueOverAction and MouseLeaveaction options didn't properly work: they should have set inexistent images to the meter.
User avatar
RazorX
Posts: 2
Joined: December 5th, 2022, 8:14 am

Re: Hovering two image

Post by RazorX »

balala wrote: December 6th, 2022, 1:17 pm This is not a code, but a screenshot. Doesn't help us too much, but at least we see what you did.
The code is almost alright. There are a few small inadvertences, for instance that you didn't use the proper image in the ImageName option. The above image (the fainter one) is called image1x.png, while the darker one, which should be seen when you're hovering the mouse over is called image2x.png. Since "normally" the fainter image should be seen, use this one in the ImageName option.
So, replace the ImageName option with the one indicating the first image: ImageName=#@#Images\image1x.png.
Even if this is not mandatory, it's a good idea to immediately update the meter when either hovering the mouse over or leaving the meter and to redraw the skin. This way you'll see the image changing immediately when hovering the mouse over or leaving it. Otherwise, you have to wait to next update cycle. So add the following bangs to the MouseOverAction and MouseLeaveAction options: [!UpdateMeter "MeterImage"][!Redraw], this way:

Code: Select all

[MeterImage]
...
MouseOverAction=[!SetOption MeterImage ImageName "#@#Images\image2x.png"][!UpdateMeter "MeterImage"][!Redraw]
MouseLeaveAction=[!SetOption MeterImage ImageName "#@#Images\image1x.png"][!UpdateMeter "MeterImage"][!Redraw]
Additional comments (a recommenation): if you've placed the images into a folder (@Resources\Images in this case), you have to include the appropriate path into the ImageName option, even if you're setting the path with !SetOption bangs. There are other possibilities as well, for instance using an ImagePath option onto the meter, but I think it's much easier to add the path directly to the ImageName option. This is why your MosueOverAction and MouseLeaveaction options didn't properly work: they should have set inexistent images to the meter.
wow, work likes a charm buddy, thank you so much... now i get it..
User avatar
balala
Rainmeter Sage
Posts: 16494
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: Hovering two image

Post by balala »

RazorX wrote: December 7th, 2022, 4:44 am wow, work likes a charm buddy, thank you so much... now i get it..
Glad to help. :great: