Display an image when hover over an item in a Radio Button Group

Ask the community
,
18

I just did this for you, see if it fits you and let me know:

import wixData from 'wix-data'

//This function changes the image
const changeImg = (imgElement, src) => (imgElement.src = src)

//This is the hard coded preselected index
const preSelectedIndex = 1

$w.onReady(async () => {
    //This sets up the repeater to all the functions you want
    $w('#rptChoices').onItemReady(($item, itemData, index) => {
        //This sets up the text inside the repeater contextually
        $item('#title').text = itemData.title
        //This sets up the text inside the repeater contextually
        $item('#text1').text = itemData.text1
        //This sets up the text inside the repeater contextually
        $item('#text2').text = itemData.text2

        //This checks the box or not, depending on the preSelectedIndex
        $item('#cb').checked = index === preSelectedIndex ? true : false

        //This checks if the checkbox is selected or not, if so, disables it
        $item('#cb').checked === true && $item('#cb').disable()

        //This functions controls the mouseIn function.
        $item('#box').onMouseIn(() => {
            changeImg($w('#img'), itemData.image)
            $w('#img').show()
        })
        //This functions controls the mouseOut function.
        $item('#box').onMouseOut(() => {
            changeImg($w('#img'), itemData.image)
            $w('#img').hide()
        })
    })
    //This retrieves the data
    const data = await wixData.query('Choices').find()
    //This puts the data inside the repeater
    $w('#rptChoices').data = data.items
})

Try it here: Checkbox