After a while searching for some ideas, I found this Leaflet example to show an image when the mouse hovers on a feature. However, I have a textBox (innerText) in OpenLayers showing several attributes obtained with the .getProperties() method in this way:
const attribute = feature.getProperties();
const mypngimage = feature.getProperties().pngimage; // this yields a path with a PNG file like "/home/myPictures/a.png"
const attributesStrings =
"id: "+ attribute.id +"\n"+
"image: "+ <a href='mypngimage'>thisIsMyPNG><\a> +"\n"+ // fails, the idea is to get a hyperlink here pointing to the PNG file
"fid: "+ attribute.fid +"\n";
info.innerText = attributesStrings;
The error message is:
"imagen: "+ <a href='mypngimage'>thisIsMyPNG</a> +"\n"+
^
Failed to parse source for import analysis because the content contains invalid JS syntax. If you are using JSX, make sure to name the file with the .jsx or .tsx extension.
So, the idea is to hover on the hyperlink (thisIsMyPNG) in the textBox so the image pops up, the hyperlink inside the textBox would be like this:
image: thisIsMyPNG
How can this be achieved? I'd appreciate any ideas for this, thanks for any pointers,
The solution was provided by Weber K., however, it worked with innerHTML instead of innerText as it is explained here.