Display image when hover event on a sharepoint field

Forms
1

Hi,

My form has a sharepoint choice field displayed as dropdown. I would want that when the user hover the field control an image appears, but this image is dependant on the value of the field.
If choice 1 is selected, the hovering image should be 1.png for exemple and when choice 2 is selected, the image could be 2.png (the path of image is well known and shoudl be something relative to SiteAssets or something like that)..

I can use $on('change') to update the CSS or something like that, but I am not a specialist of CSS to know exactly what I have to code in spRendered function to bind the correct image to the value of field.

Is it possible to do such thing ?

Regards.

Eric.

2

Dear @educos35,
This is just an example, and it's a bit twitchy, but this would work.

First, you need to give a CSS class to the field, for example dropdown:

image
image1196×176 6.86 KB

Then, you would need to add JS code, which will append an image to the field, and would also change the source of the image dynamically, depending on the value of this field, like this:

fd.spRendered(function(){
    $(fd.field("ChoiceDropdown").$el).append('<img id="theImg" />')
    
    function changeImg() {
        if (fd.field("ChoiceDropdown").value == "Yes") {
            $("#theImg").attr("src", "https://static.plumsail.com/wp-content/themes/plumsail/assets/images/logo.svg");
        } else {
            $("#theImg").attr("src", "https://static.plumsail.com/wp-content/uploads/2018/12/PowerAppsForms.png");
        }
    }

    // Calling changeImg when the user changes the ChoiceDropdown
    fd.field("ChoiceDropdown").$on("change",changeImg);

    // Calling changeImg on form loading
    changeImg();
});

Finally, you need to hide the image with CSS and only display it when the user hovers over the field with the dropdown class. Add this to CSS editor:

.dropdown #theImg{ display:none; }
.dropdown:hover #theImg {display: block; }

And you'll get the following result:

gJUrqlAaMq
gJUrqlAaMq844×487 290 KB

3

Hi,
Thanks...that's just what I want and it works.

I just have to adjust the position and size of the displayed image using the css now...

Regards.

1 Like