Hover interactions with CMS database

Ask the community
, , ,
1

Can I have an Image change depending on which Text element is hovered over, while linked to CMS?

Product: Wix Studio

I have list repeater (centre) that contains text elements linked to a database, I’d like to be able to hover over those, and have the image on the right change, and the description on the left change accordingly with which ever option I hover over. (see image attached below)

Screen Shot 2023-12-02 at 2.01.21 pm
Screen Shot 2023-12-02 at 2.01.21 pm1264×775 106 KB

I know I can have a stack of Images piled on top of each other and use the hover interaction to make them appear one by one. But was hoping I could achieve this while just having the one image, that changes depending on the text element hovered over.

Is this possible without coding?

2

Hi Steven

No this is not possible without Coding (Wix Velo).

Here is the code for it:

import wixData from 'wix-data';

$w.onReady(function () {
    // Attach a hover event to each item in the repeater
    $w('#yourRepeater').forEachItem(($item, itemData, index) => {
        $item('#yourTextElement').onMouseIn(() => {
            changeContentBasedOnHover(itemData._id);
        });
    });
});

function changeContentBasedOnHover(itemId) {
    // Query the database for the item with the given ID
    wixData.query('YourDatabase')
        .eq('_id', itemId)
        .find()
        .then(results => {
            if (results.items.length > 0) {
                const item = results.items[0];
                // Update the image and text based on the database results
                $w('#yourImageElement').src = item.imageUrl;
                $w('#yourDescriptionElement').text = item.description;
            }
        })
        .catch(err => {
            console.log('Error:', err);
        });
}

You can change the placeholders accordingly :slight_smile:

Hope that answers it