How to Instantly Swap Images on Hover in Clickfunnels
Channel: Dan Havey
Date: 2023-11-22

For More Training on ClickFunnels 1.0 and 2.0, Membership Sites, Courses and Custom Code Hacks - Go To https://CFninjas.com

Check out the One Funnel Away Challenge here… https://funneldesignmastery.com/ofa-challenge

Hey everyone, Dan Havey here with another Clickfunnels Quick Tip! Today, I’m tackling a question I received about swapping out an image on hover. If you've ever wondered how to do this, you’re in the right place. I’ve already got some code prepped and I’ll walk you through it step-by-step.

First off, we need to dive into the element we want to change. Click on the little code icon, the one with the carrots and slash. We need to generate an ID for this image. While we could type in a custom name, for simplicity, we’ll stick with the generic ID Clickfunnels gives us. Copy that ID, because we’ll need it for our code.

Now, let’s look at the code I’ve started. Our goal is to swap the image when we hover over it, and then revert it back when we move the cursor away. We’ll be focusing on the IMG part of the element. When we hover over this image, we want the URL attribute to change to our new image, and then change back once we move the cursor away.

To make this work, we need two image URLs: the one we’re switching to and the original one we’re reverting back to. First, find the URL of the image you want to revert to. Right-click on the image, select “Edit,” and then copy the image address. Paste this URL into your code where it specifies the original image.

Next, find the URL of the image you want to switch to. Follow the same steps: right-click, select “Edit,” and copy the image address. Paste this URL into your code as the new image. Save your changes, and that’s it!

To test it, click on the preview icon. Hover over your image, and it should swap out just like that! You might be wondering about adding a fade effect or having the images flip over each other. While those are cool effects, they’re a bit more complex and might require additional coding tricks. We can cover those in another video.

If you have any questions or need further help, just let me know. Thanks for tuning in, and I’ll see you next time for more Clickfunnels Quick Tips!