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

Ask the community
,
20

@russian-dima You are right, I didn’t read everything @jimyaccino wanted, just the last post so I clearly misunderstood. Would this be a solution?

import wixData from 'wix-data'

//This function changes the image
const changeImg = (imgElement, src) => {
    fixedImage ? '' :   imgElement.src = src
}

//This is the hard coded preselected index
let preSelectedIndex
let fixedImage = false

$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)
            fixedImage || $w('#img').hide()
        })
        //This function does stuff when a checkbox is changed
        $item('#cb').onChange(() => {
            fixedImage = false
            changeImg($w('#img'), itemData.image)
            fixedImage = true
            //Runs through the options and change them, letting only the selected one marked
            $w('#rptChoices').forEachItem(($i, idata, i) => {
                $i('#cb').checked = i !== index ? false : true
            })
        })
        //This fixes the image after being clicked
        $item('#box').onClick(() => (fixedImage = !fixedImage))
    })
    //This retrieves the data
    const data = await wixData.query('Choices').find()
    //This puts the data inside the repeater
    $w('#rptChoices').data = data.items
})

You can use the same link to test.