Este es el código:- '''
<!DOCTYPE html> <html lang="en"> <head> <!-- Observers Dashboard hhttps://xd.adobe.com/view/d532ccdf-7a7a-4d1e-a819-5ce157cdbded-8061/screen/a779cae4-5263-465f-a743-e5c8caf68b0a --> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <div class="container-fluid"> <h1>Dashboard</h1>''' Este es el enlace de la imagen
Tengo que rellenar el color en diferentes distritos del mapa de imagen, ¿cómo puedo lograrlo?
Probablemente la forma más rápida/fácil de hacer esto es con el complemento ImageMapster jQuery de James Treworgy.
http://www.outsharked.com/imagemapster/
Estas demostraciones muestran que hará exactamente lo que deseas:
http://www.outsharked.com/imagemapster/default.aspx?demos.html
Al llamar a $('img').mapster(options) , ImageMapster intentará vincularse a cada imagen que tenga un mapa asociado. Se puede seleccionar un área dentro del mapa de imagen con $('area').mapster('select') . El proyecto tiene muchas opciones y características.
Aquí hay un código para un ejemplo algo básico:
