Hello

If you want to add inputs to the patch, you can use Html buttons and the function "onclick".
Something like that:

<button onclick="pd.send ( ' receive01 ' , ' 1 ' )"> 1 <button>
<button onclick="pd.send ( 'receive01 ' , ' 2 ' )"> 2 <button>
<button onclick="pd.send ( 'receive01' , ' 3 ' )"> 3 <button>

Maybe the syntaxe is not exact. See there for more info.

Well done.

Raffaella de Laurentiis - Cre-o leonis Il pleut

All images made in pure data. Editing in Shotcut

Stranger - Cre-o leonis il pleut

Font Keigo Hara.

And another one

Another design.

@EEight , why did you pinned it in "Output~" ?

Dans cette vidéo je montre comment utiliser conjointement pure data et un synté analogique modulaire.

And there the simpliest webpd site I could come up with.

Link :
http://leonisaircraft.go.yj.fr/

The site full code :
Site.zip

You can use it for yourself. Put your image and your patch and your done.

Take some time to read the step-by-step guide nonetheless, it will help you greatly.

By defining areas on the image, you can, in conjonction with onclick and Pd.send() function, create an interactive patch. Note that, not only images, but any part of the site, can be made interactive.

Don't forget that webpd doesn"t feature all pure data objects, only a (large) selection. If your patch doesn't behave as expected, check the list of objects.

Works fine on firefox and safari, and on my cellphone "internet" browser. But not for Chrome who wants a user gesture. Very nice but it means someone will have to put some kind of button for chrome. Thank you @EEight . And Chrome is by far the most popular browser nowaday.