I'm using a maphilight to iluminate an area from a map
But I want to to set the maphilight dynamically with a select.
The code below runs with the clic on the image, but I want for example: if I selected in the select "AGU" option (with the same name of the area) that area illuminate like on the clic
I tried with (but It doesn't work):
function show(estado){
console.log(estado.options[estado.selectedIndex].text)
var area = document.getElementById("AGU")
$('#AGU').maphilight({ fade: true,strokeColor: '950054', fillColor: '950054', fillOpacity: 0.3 });
//console.log(area)
$(function() {
$('.map').maphilight({ fade: true,strokeColor: '950054', fillColor: '950054', fillOpacity: 0.3 });
});
}
This is the complete code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head >
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery.maphighlight.min.js"></script>
<script src="js/imageMapResizer.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
function show(estado){
console.log(estado.options[estado.selectedIndex].text)
var area = document.getElementById("AGU")
$('#AGU').maphilight({ fade: true,strokeColor: '950054', fillColor: '950054', fillOpacity: 0.3 });
//console.log(area)
$(function() {
$('.map').maphilight({ fade: true,strokeColor: '950054', fillColor: '950054', fillOpacity: 0.3 });
});
}
$(function () {
$('.listaEdos').mouseover(function(e) {
$($(this).data('parent-map')).mouseover();
}).mouseout(function(e) {
$($(this).data('parent-map')).mouseout();
}).click(function(e) {
e.preventDefault();
$($(this).data('parent-map')).click();
});
var areaLastClicked=null;
var last_selected_id_estado=null;
$('.area').click(function (e) {
e.preventDefault();
var $area = $(this);
var meid = $area.attr('id');
var data = $area.data('maphilight') || {};
if(areaLastClicked!==null){
var lastData = areaLastClicked.data('maphilight') || {};
lastData.alwaysOn=false;
$('#letras'+areaLastClicked.attr('id')).removeClass('listaEdosActive');
}
$('#letras'+meid).addClass('listaEdosActive');
areaLastClicked=$area;
data.alwaysOn = true;
$(this).data('maphilight', data).trigger('alwaysOn.maphilight');
last_selected_id_estado = $(this).data('id-estado');
});
$('.map').maphilight({ fade: true,strokeColor: '950054', fillColor: '950054', fillOpacity: 0.3 });
});
</script>
<link type="text/css" rel="stylesheet" href="css/estilos_mapa.css" />
</head>
<body>
<div class="container">
<form id="form1" >
<div id="control_map">
<map name="mexico" id="map_ID">
<area id="AGU" data-id-estado="1" alt="AGU" title="Aguascalientes" class="area" href="www.cofemer.gob.mx" shape="poly" coords="317,269,317,268,319,268,319,269,320,269,320,270,321,270,321,272,322,272,322,275,323,275,323,276,324,276,324,277,325,277,325,278,324,278,324,279,322,279,322,280,321,280,321,281,320,281,320,282,319,282,319,283,315,283,315,282,312,282,312,281,308,281,308,282,306,282,306,283,306,282,305,282,305,280,304,280,304,277,305,277,305,275,307,275,307,274,308,274,308,273,310,273,310,272,311,272,311,271,313,271,313,270,315,269,317,269" />
<area id="BCN" data-id-estado="2" alt="BCN" title="Baja California Norte" class="area" href="#" shape="poly" coords="40,0,40,1,56,1,56,2,71,2,71,3,74,3,73,3,73,4,72,4,72,5,71,5,71,6,70,6,70,7,69,7,69,9,68,9,68,13,69,13,69,19,67,19,67,22,68,22,68,23,69,23,69,24,70,24,70,27,69,27,69,30,68,30,68,36,67,36,67,40,68,40,68,43,69,43,69,65,70,65,70,66,71,66,71,68,72,68,72,70,73,70,73,73,75,73,75,74,76,74,76,75,77,75,77,76,78,76,78,77,79,77,79,78,80,78,80,79,81,79,81,81,82,81,82,82,83,82,83,83,84,83,84,84,85,84,85,85,86,85,86,86,87,86,87,90,88,90,88,92,87,92,87,96,88,96,88,97,90,97,90,96,91,96,91,99,93,99,93,100,94,100,94,105,95,105,95,106,96,106,96,107,99,107,99,109,100,109,100,112,101,112,101,117,94,117,94,116,84,116,84,115,76,115,76,114,75,114,76,114,76,110,75,110,75,109,76,109,76,106,77,106,77,102,76,102,76,101,75,101,75,100,74,100,74,98,73,98,73,97,72,97,72,95,71,95,71,93,70,93,70,92,69,92,69,91,68,91,68,90,67,90,67,88,66,88,66,87,65,87,65,85,64,85,64,84,63,84,63,82,62,82,62,81,61,81,61,80,60,80,60,79,58,79,58,78,56,78,56,77,55,77,55,76,54,76,54,75,53,75,53,74,52,74,52,73,51,73,51,72,50,72,50,71,49,71,49,70,48,70,48,69,47,69,47,64,46,64,46,63,45,63,46,63,46,54,45,54,45,53,44,53,44,51,42,51,42,52,42,44,41,44,41,40,40,40,40,39,39,39,39,34,38,34,38,30,37,30,37,28,36,28,36,27,35,27,35,25,34,25,34,24,33,24,33,19,32,19,33,19,33,20,35,20,35,16,33,16,33,14,32,14,32,13,31,13,31,10,30,10,30,6,29,6,29,4,28,4,28,2,27,2,27,0,40,0" />
<area id="BCS" data-id-estado="3" alt="BCS" title="Baja California Sur" class="area" href="#" shape="poly" coords="55,117,55,118,58,118,58,119,62,119,62,120,65,120,65,119,67,119,67,118,68,118,68,119,69,119,69,121,73,121,73,120,74,120,74,118,72,118,72,116,71,116,72,116,72,115,72,117,82,117,82,118,92,118,92,119,100,119,100,120,101,120,101,123,102,123,102,125,103,125,103,126,104,126,104,128,105,128,105,129,107,129,107,131,108,131,108,132,109,132,109,134,110,134,110,137,111,137,111,140,112,140,112,141,113,141,113,142,115,142,115,147,116,147,116,153,117,153,117,156,121,156,121,154,120,154,120,152,119,152,119,148,119,149,120,149,120,150,121,150,121,151,122,151,122,153,123,153,123,156,124,156,124,157,125,157,125,161,126,161,126,166,127,166,127,170,126,170,126,173,127,173,127,176,128,176,128,178,129,178,129,180,130,180,130,181,131,181,131,182,132,182,132,185,133,185,133,190,134,190,134,193,135,193,135,195,136,195,136,197,137,197,137,199,138,199,138,201,137,201,137,211,138,211,138,213,139,213,139,215,141,215,141,216,143,216,143,218,146,218,146,212,147,212,147,213,148,213,148,214,149,214,149,215,150,215,150,216,151,216,151,218,152,218,152,219,153,219,153,220,155,220,155,221,156,221,156,226,157,226,157,229,158,229,158,231,159,231,159,232,161,232,161,234,162,234,162,240,161,240,161,241,160,241,160,243,158,243,158,244,156,244,156,245,153,245,153,246,151,246,151,247,151,246,150,246,150,245,149,245,149,244,148,244,148,240,147,240,147,236,146,236,146,234,145,234,145,232,144,232,144,230,143,230,143,229,142,229,142,228,140,228,140,227,139,227,139,226,138,226,138,225,137,225,137,224,136,224,136,223,135,223,135,221,134,221,134,220,133,220,133,219,132,219,132,218,131,218,131,217,130,217,130,216,129,216,129,215,128,215,128,214,127,214,127,213,126,213,126,212,125,212,125,211,123,211,123,210,120,210,120,209,118,209,120,209,120,207,119,207,119,206,118,206,118,204,117,204,117,203,114,203,114,204,114,201,113,201,113,199,112,199,112,197,110,197,110,198,109,198,109,196,108,196,108,195,107,195,108,195,108,194,109,194,109,192,108,192,108,191,109,191,109,188,110,188,110,184,109,184,109,182,109,184,111,184,111,180,112,180,112,176,111,176,111,174,110,174,110,168,109,168,109,166,108,166,108,165,107,165,107,163,106,163,106,162,105,162,105,161,102,161,102,160,101,160,101,159,99,159,99,158,98,158,98,156,97,156,97,155,95,155,95,154,94,154,94,151,93,151,93,149,92,149,92,148,93,148,93,146,91,146,92,146,92,144,93,144,93,142,90,142,90,144,89,144,89,145,88,145,88,146,87,146,87,145,86,145,86,144,85,144,85,143,83,143,83,146,82,146,82,147,81,147,81,145,80,145,80,144,79,144,79,143,78,143,78,141,77,141,77,140,74,140,74,139,73,139,73,138,72,138,72,137,71,137,71,136,70,136,70,135,66,135,66,134,65,134,65,132,64,132,64,127,63,127,63,126,62,126,62,125,60,125,60,124,59,124,59,123,58,123,58,121,56,121,56,120,55,120,55,119,54,119,54,117,55,117" />
</map>
<div id='content_mapa'>
<img id="map_ID" class="map" src="https://minio-ejc.apps.funcionpublica.gob.mx/etica/Imagenes/mapa.png" usemap="#mexico" title="Mexico" alt="Mexico" />
<div id="edo" > </div>
<div class="escudo"></div>
</div>
<div>
<select id="selectComites" onchange="show(this)">
<option value="">-- Select --</option>
<option value="AGU">AGU</option>
<option value="BCN">BCN</option>
<option value="BCS">BCS</option>
</select>
</div>
</div>
</form>
<div id = "Info"></div>
</div>
</body>
</html>