Does anyone have a rollover button tutorial?

Debbie shared this question 1 year ago
Answered

I'm a newbie. After much searching and experimenting, I have not been able to successfully create a rollover button effect with a graphic in an up state and down state. I've seen 2 posts about it but the instructions are not clear. I'm also seeing the graphic shake a lot which is pretty annoying. Is there a tutorial with step by step screenshots that you can point me to? Your help is much appreciated!

Thanks, Deb

Comments (7)

photo
1

Hi Debbie,


Can you attach an example of what you are looking for and what this looks like so we can assist you more helpfully?


Best,


Sonia Durán

photo
1

I am hoping to create a typical button effect. Take a look at this live site to see in action. http://www.pardot.com/


Many thanks, Deb

photo
1

Hi,


I have tried both these responses:

https://www.justinmind.com/community/topic/how_do_i_simulate_a_button_behavior_or_a_rollover_image

https://www.justinmind.com/community/topic/how-do-you-simulate-an-overlay-at-mouseover


and neither is working for me. I know I am doing something wrong but cannot work out what that is. Your help is much appreciated!

Deb

photo
1

I've attached a screenshot of my efforts to create a rollover button. This shows the actions placed on the image that shows at mouse enter and mouse click. Nothing is working.


Perhaps it is because I am using the free version? Thoughts?

Thank you, Deb

photo
1

Hi Debbie,


Here you are an example. Hope it helps.


Best,


Sonia Durán

photo
1

Hi,


I appreciate this attempt you have sent me, but this is not going to work. You have used the Button widget, but I am attempting to create a rollover effect with 2 different graphics. I've attached them. This should not be so difficult to do, but it has been for me.

Thank you, Deb

photo
1

Hi Debbie,


You will need to create the following:


1.Drag the first icon to the canvas

2.Create a On Mouse Over / Set Value event on it.

3.Select "Add image" at the events manager tab.

4.Add the second icon image

5.Simulate.


Let me know how this works for you.


Best,


Sonia Durán