How to make an ipywidgets Image clickable?

Question

I would like to make an Image instance in a jupyter notebook to respond to click events - how can we do this? I also want to be able to identify the image that was clicked. It is simple to do so with buttons but not with images.

Answer 1

After playing around with this, the only way I could do it so far is by using some javascript... in the python code, I have something like:

from ipywidgets import Image
from IPython.display import display, Javascript
im = Image(value=open(filename, 'rb').read())
im.add_class('the_image_class')

def on_image_click():
    #do something....
    return 

#Now, I wrote some javascript(jQuery) code like this...
js = ''' $(".the_image_class").on("click", function(e){
             var kernel = IPython.notebook.kernel;
             kernel.execute("on_image_click()");
          });'''

#then, run the javascript...
display(Javascript(js))

Which is kind of missing the point of using the widgets entirely in python... Is there a better way to bind python functions to the widgets events, without javascript?

Answer 2

I find the other responses to be hacks (Injecting JavaScript on the page is not a good practice, and it might not work in JupyterLab).

You can have a look at ipyevents: https://github.com/mwcraig/ipyevents

It allows you to add event listeners to any widget, and it is developed by a core-ipywidgets maintainer.