Connection between html.MapEl & html.Img

@crazynigga1917 wrote:

Hey all, I have some trouble with using maps on image. I use MapEl with 3 Areas and try to connect it with img. It’s really doesn’t work. Maybe I have some mistackes in syntaxis or in arguments/in logic…

import dash
import dash_html_components as html
import flask
import base64

flask_app = flask.Flask(__name__)
app = dash.Dash(__name__, server=flask_app, url_base_pathname='/')
app.config['suppress_callback_exceptions'] = True
image_filename = 'img.png'
test_base64 = base64.b64encode(open(image_filename, 'rb').read()).decode('ascii')
mapp = html.MapEl(name="1", id="1", children=[html.Area(shape="rect", coords="0,0,10,10", href="https://developer.mozilla.org/docs/Web/HTML", target="_blank", alt='b;fj'),
                                                html.Area(shape="rect", coords="0,0,200,500", href="https://developer.mozilla.org/docs/Web/CSS", target="_blank"),
                                                html.Area(shape="rect", coords="130,147,200,107", href="https://developer.mozilla.org/docs/Web/JavaScript", target="_blank")])
p = html.Img(useMap="#1", src='data:image/png;base64,{}'.format(test_base64), alt="350 x 150 pic")
#<img usemap="#infographic" src="/media/examples/mdn-info2.png" alt="MDN infographic" />
app.layout = p
if __name__ == '__main__':
    flask_app.run()

Posts: 1

Participants: 1

Read full topic