GUI Help (changing image when clicked, changes color when mouse is hovering over)

Help and Feedback Scripting Support
, ,
#1

I’m trying to achieve a GUI that changes its image when clicked locally, there are two image buttons under one Screen GUI. I’m really new to scripting, so I’m really unsure what to do.

I’m also trying to make the image buttons turn into a darker shade when your mouse hovers over the button and turns back into normal when your mouse is out of the button’s territory.

3 Likes
#2

ImageLabels have a property called HoverImage and using that you can put in a translucant black image which will be over your image every time you hover over it.

#3

First off, you can disable the AutoButtonColor property of both gui buttons, and then insert a LocalScript in them, with the following code:

script.Parent.MouseEnter:Connect(function()
script.Parent.ImageColor3 = Color3.FromRGB(180, 180, 180) -- Can be lower if needed.
script.Parent.BackgroundColor3 = Color3.FromRGB(180, 180, 180) -- Optional, and can be lower too.
end)
script.Parent.MouseLeave:Connect(function()
script.Parent.ImageColor3 = Color3.FromRGB(255, 255, 255)
script.Parent.BackgroundColor3 = Color3.FromRGB(255, 255, 255)
end)

That should make it so that your ImageButtons will have a darker shade when the button is entering the ImageButton. This also functions just as fine with Frames, TextLabels, ScrollingFrames, TextButtons, etc, but if its not a button, just dont mind about the AutoButtonColor, as it is already not there anyways. You also have to exclude ImageColor3 from being changed in the code unless its a ImageLabel or a ImageButton, if it’s not; just remove both lines containing ImageColor3.

(edit: fixed an insight in the code)

1 Like
#4

Put a text label with a transparent background as a child of the ImageLabel. Define that text label in the script below, set the text to nothing, and set the size to (1,0,1,0). Then make the background color black, and use the following code.

local Overlay = --define
Frame.MouseEnter:Connect(function()
    Overlay.BackgroundTransparency = 0.7
end

Frame.MouseLeave:Connect(function()
         Overlay.BackgroundTransparency = 1
end
#5

I have a local script in both of them, disabled autobuttoncolor, and I even took off the background transparency of each image to see if it works, and it doesn’t really do anything. They each have their own separate local script.

#6

Oops, the “BackgroundColor” in the first event should have had a “3” at the end of it. It’s an insight on my part, my bad.

#7

sorry, it still doesn’t really seem to be working

#8

2 years later yes, but this code may not be working because “FromRGB” should be formatted as “fromRGB” to work as ROBLOX’s function for that. Ran a test with that theory and the code worked

1 Like