HTML to execute script

[devin]

Hi everybody,

Anybody knows how to execute a script (NSBASE/Lua) from an HTML block? My idea is to have an SVG Map and execute a script on clicking a certain area.

Thank you!

Best Regards

Devin Erba

[neuts-jl]

You can run a script from an HTML link in an HTML component using ActionOnHotSpotClick
In your case, you can use the following HTML code

<img src="f:/logoWindows.jpg" width="145" height="145" alt="Plan" usemap="#logo" />

<map name = "logo">
   <area shape="rect" coords="0,0,70,70" href="#home" alt="home" />
   <area shape="rect" coords="80,0,145,70" href="#green" alt="green"/>
   <area shape="rect" coords="0,80,70,145" href="#blue" alt="blue" />
   <area shape="rect" coords="80,80,145,145" href="#orange" alt="orange" />
</map>

And in LUA code

function html:HtmlMemo1ActionOnHotSpotClick(link)
   print(link)
end    

[devin]

Thank you @surfvite I'll try!

[neuts-jl]

Here is another variant by integrating the image in the HTML code thus avoiding files external to the application using for example the site below to convert the images
https://www.base64-image.de/

<img 
src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBggGEAkIBwgRCQkKDRYIBgcH
DRoTCgcWHxwhIBMQEhIYJzIeFxk4Gx4eLUYgIycpLDMsHR4xNUIqNSYrLCkBCQoKDQsOGQ4NGTUlHh0vNDUxN
TU1NTU1NSwtNTU1NSosNDUzNCksNSwuNTUyNjUpNS4sLCk2LCwsKTQpNSopKf/AABEIAOEA4QMBIgACEQED
EQH/xAAaAAEBAQEBAQEAAAAAAAAAAAAABwYFBAED/8QAMRABAAEABggGAQQDAAAAAAAAAAECAwQF
sdEHFjRTVHFzkQYVFzOSohESEzFRISIk/8QAHAEBAAMBAQEBAQAAAAAAAAAAAAUGBwQIAwIB/8QAMBEBAA
EABggFBAMBAAAAAAAAAAECAwQFFVEzNHKBkaHB0QYTFlJxERQhMRJB8WH/2gAMAwEAAhEDEQA/APzAVJ
pgAAAAAAAAAApOjbZa7r0sITZSdG2y13XpYQ7rBptyHvnVZ
+YdLxdslo50cYTlRvF2yWjnRxhOXBfesRs9ZUOs/YAg3zAAAAAAAAAAAAcoBOtYAAAAAAAAAAFJ0bbLXdelhCb
KTo22Wu69LCHdYNNuQ986rPzDpeLtktHOjjCcqN4u2S0c6OMJy4L71iNnrKh1n7AEG
+YAAAAAAAAAAADlAJ1rAAAAAAAAAAApOjbZa7r0sITZSdG2y13XpYQ7rBptyHvnVZ
+YdLxdslo50cYTlRvF2yWjnRxhOXBfesRs9ZUOs/YAg3zAAAAAAAAAAAAcoBOtYAAAAAAAAAAFJ0bbLXdelhCb
KTo22Wu69LCHdYNNuQ986rPzDpeLtktHOjjCcqN4u2S0c6OMJy4L71iNnrKh1n7AEG
+YAAAAAAAAAAADlAJ1rAAAAAAAAAAApOjbZa7r0sITZSdG2y13XpYQ7rBptyHvnVZ
+YdLxdslo50cYTlRvF2yWjnRxhOXBfesRs9ZUOs/YAg3zAAAAAAAAAAAAcoBOtYAAAAAAAAAAFJ0bbLXdelhCb
KTo22Wu69LCHdYNNuQ986rPzDpeLtktHOjjCcqN4u2S0c6OMJy4L71iNnrKh1n7AEG+YAAAAAAAAAAADlCj
+m128RW94yPTa7eIre8ZLX9hXZNAxmyZzwTgUf02u3iK3vGR6bXbxFb3jI
+wrsjGbJnPBOBR/Ta7eIre8ZHptdvEVveMj7CuyMZsmc8E4FH9Nrt4it7xkem128RW94yPsK7IxmyZzwTgUf02u3iK3
vGR6bXbxFb3jI
+wrsjGbJnPBOBR/Ta7eIre8ZHptdvEVveMj7CuyMZsmc8E4UjRtstd15wh89Nrt4it7xk7lx3HUXDV0rPZ6dKnRpU/3Z
pV0/7fl02Wy1lVWfypI+8bxqLRUfwq5/P1yefxdP8AyWjnRxhOVVvK76u86unZq2lNGhT/AB+qaH8x
+HE1DsG/rO8ZOW87BXWmtinVx+Pp3VWnQmZ/DCjdah2Df1neMjUOwb
+s7xkjMHtWUcX48ukwo3Wodg39Z3jI1DsG/rO8ZGD2rKOJ5dJhRutQ7Bv6zvGRqHYN/Wd4yMHtWUcTy6TCjdah2
Df1neMjUOwb
+s7xkYPaso4nl0mFG61DsG/rO8ZGodg39Z3jIwe1ZRxPLpMKN1qHYN/Wd4yNQ7Bv6zvGRg9qyjieXSYUbrUOw7+
s7xk+v5g9qyjieXSejXa4+Nj4UsjXa4+Nj4UsknGsYTU5zy7Kxjto9sc
+6sa7XHxsfClka7XHxsfClkk4YTU5zy7GO2j2xz7qxrtcfGx8KWRrtcfGx8KWSThhNTnPLsY7aPbHPurGu1x8bHwpZG
u1x8bHwpZJOGE1Oc8uxjto9sc
+6sa7XHxsfClka7XHxsfClkk4YTU5zy7GO2j2xz7qxrtcfGx8KWRrtcfGx8KWSThhNTnPLsY7aPbHPurGutycb9KWTo3
ZellvajSrrFW/u1dGl
+3SpfiY/E/1/lFpUnRvstb15whyWywVdRV/zozP1d933pXWqu8unEfT6f1/rT2i0ULNRpVlbS/TQo/zS/p5PPbBv/rL5f
3sV3OMYZJQr1vausVdFXVxExMfX87/APq5WWy0K6hNKlP9td57YN/9ZPPbBv8A6yyIivUdq9tHn3deHVWctd57YN
/9ZPPbBv8A6yyIeo7V7aPPuYdVZy13ntg3/wBZPPbBv/rLIh6jtXto8+5h1VnLXee2Df8A1k89sG/
+ssiHqO1e2jz7mHVWctd57YN/9ZPPbBv/AKyyIeo7V7aPPuYdVZy13ntg3/1k89sG/wDrLIh6jtXto8+5h1VnLXee2Df
/AFkZEPUdq9tHn3MOqs5YgBubFQAAAAAAAAACVJ0b7LW9ecITaVJ0b7LW9ecIRt56DfCZuXWd0u3f3sV3OMYZJr
b
+9iu5xjDJMd8RazR2estRu7Rz8gCupAAAAAAAAAAAABiAHpZgoAAAAAAAAABKk6N9lrevOEJtKk6N9lrevOEI2
89BvhM3LrO6Xbv72K7nGMMk1t/exXc4xhkmO
+ItZo7PWWo3do5+QBXUgAAAAAAAAAAAAxAD0swUAAAAAAAAAAlSdG+y1vXnCE2lSdG
+y1vXnCEbeeg3wmbl1ndLt397FdzjGGSa2/vYrucYwyTHfEWs0dnrLUbu0c/IArqQAAAAAAAAAAAAYgB6WYKAA
AAAAAAAASpOjfZa3rzhCbSpOjfZa3rzhCNvPQb4TNy6zul27+9iu5xjDJNbf3sV3OMYZJjviLWaOz1lqN3aOfkAV1I
AAAAAAAAAAAAMQA9LMFAAAAAAAAAAJUnRvstb15whNpUnRvstb15whG3noN8Jm5dZ3S7d/exXc4xhkmtv7
2K7nGMMkx3xFrNHZ6y1G7tHPyAK6kAAAAAAAAAAAAGIAelmCgAAAAAAAAAEqTo32Wt684Qm0qTo32Wt68
4Qjbz0G
+Ezcus7pdu/vYrucYwyTW397FdzjGGSY74i1mjs9Zajd2jn5AFdSAAAAAAAAAAAADEAPSzBQAAAAAAAAACVJ0b
7LW9ecIBG3noN8Jm5dZ3S7d/exXc4xhkgY74i1mjs9Zajd2jn5AFdSAAAAAAAAAAAAD//2Q==" width="145" 
height="145" alt="Plan" usemap="#logo" />
<map name = "logo">
   <area shape="rect" coords="0,0,70,70" href="#home" alt="home" />
   <area shape="rect" coords="80,0,145,70" href="#green" alt="green"/>
   <area shape="rect" coords="0,80,70,145" href="#blue" alt="blue" />
   <area shape="rect" coords="80,80,145,145" href="#orange" alt="orange" />
</map>