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.
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:
