Rollover images offer a way to improve the user experience on your page and make certain elements interactive. Want to have an image change when someone hovers over it? Or maybe you'd rather have some text appear instead? Now you can!
With a few minor adjustments to this script you'll also be able to create your own custom tooltips and hints on the page.
See this effect in action on a live Unbounce page here.
Check out the video tutorials!
Rollover Image Tutorial
WARNING: YOU ARE ENTERING DEVELOPER TERRITORY
IMAGE SWAP SCRIPT:
How It Works:
Step 1 : Place the Page Elements on the Page -
Let's get started! Getting the on hover image swap working on your page won't be too difficult. It works by stacking two Unbounce page elements (images, boxes, pretty much anything) on top of each other and then hiding the top element with some CSS. This top element will be what appears when the mouse moves over the bottom element, which will be visible when the page loads.
*NOTE - Depending on the images, you can usually make two images exactly the same size despite aspect ratio by applying a mask.
If you're creating tooltips/hints, you won't want to stack the images on top of each other, but rather place the element you'd like to appear elsewhere on the page. For example, if you're adding a tooltip for a button, place the text next to or below the button itself.
*PRO-TIP : If you'd like to include images and text as a tooltip you can simply put anything you want to appear on hover in a box element and hide/ show that instead.
For tooltips and hints, use the second script (on-hover-show-hide).
Step 3: Change the ID on line 3 to be the ID of the element you would like to trigger the on hover effect. For lines 4, 7, 8 replace the IDs with the ID of the element you'd like to appear on hover.
Step 4 : Add the CSS!
Add the following CSS snippet to your page in the ÒstylesheetsÓ tab in order to hide the tooltip/rollover image:
Make sure to swap #lp-pom-image-9 with the ID of your own element. You can chain multiple elements to hide by separating the IDs with a comma.
Step 5. You're done! Save and publish the page, then kick back and relax. You've earned it!
Testing: Like anything else you implement on your page, you're going to want to test this out thoroughly to see what effect (if any) it has on your conversion rates. We recommend running an A/B test and segmenting a small portion of traffic towards the page - just to be safe.
Conclusion: We've given you the ground work, but we would love to see how you implement this on your own pages.
---- Did you find this tip useful? Did you test this on your landing page? Let us know in the comments below!
CHECK OUT THE DEMO AND DOWNLOAD YOUR OWN VERSION HERE -
Download the example page