Clickable a tag on image source in dash

Dash Python
1

Hi :slight_smile:

While I was working on my dashboard application, I wanted to add ‘clickable’ images which links to certain website (my github page or blog perhaps)

Here is my code source, but I’m lost how to integrate my limited html knowledge to dash-html-components.

        html.Div(
            html.Img(
                src='https://i.imgur.com/zNUvykh.png',
                style={
                    'height' : '4%',
                    'width' : '4%',
                    'float' : 'right',
                    'position' : 'relative',
                    'padding-top' : 0,
                    'padding-right' : 0

                },
            )

I would really appreciate if anyone could contribute or show me the way how to integrate a tag href tag

Thanks !

2

Hi @lucaseo1991

All you have to do is put the html.Img within a html.A tag, and the image becomes clickable. You just need to specify the href parameter:

Try this with your example, it should work:

import dash
import dash_html_components as html

app = dash.Dash()

app.layout = html.Div([
    html.A([
            html.Img(
                src='https://i.imgur.com/zNUvykh.png',
                style={
                    'height' : '4%',
                    'width' : '4%',
                    'float' : 'right',
                    'position' : 'relative',
                    'padding-top' : 0,
                    'padding-right' : 0
                })
    ], href='https://www.google.com')
]) 
if __name__ == '__main__':
    app.run_server()

Good luck!

3 Likes
3

Thanks @eliasdabbas !!! This is perfect!
Not only you solved my problem, but also I got better understanding on how html components on dash work :slight_smile:

1 Like
4

Is there a way to do this for an imagemap, so you can click on different parts of the image and they have different links?

I’m assuming you need to use MapEl and/or Area, but can’t work out how to code it in Dash.

5

FYI, I tried this as well, but html.A did not work with dcc.Location callback functions. You can have the same functionality by replacing html.A with dcc.Link if you want the url pathname to be used in a callback.