var clickedColor = "#ee293d"; var hoverColor = "#1a5dad"; var normalColor = "#efbd95"; var selected; function get_name(id){ return id.replace("map-", ""); } function clicked(elem){ set_element_active(elem); $.alert({ title: 'Chargement...', theme: 'supervan', content: function () { let self = this; let object = { "function": 'get_map_info', 'selector': get_name(elem.id), }; return $.ajax({ url: 'admin/ajax_load.php', data: object, method: 'get' }).done(function (data) { if (data.length > 0) { self.setTitle(data[0]['title']); self.setContent(data[0]['description']); } else { self.setTitle('Erreur'); self.setContent('Une erreur est survenue') } }).fail(function(){ self.setContent('Something went wrong.'); }); } }); } function set_element_active(elem){ selected = elem; let elements = document.querySelectorAll('*[id^="map-"]'); for (let i = 0; i < elements.length; i++){ $(elements[i]).css("fill", normalColor); } $(elem).css("fill", clickedColor); } function hover_in(elem){ if (elem !== selected) $(elem).css("fill", hoverColor); } function hover_out(elem){ if (elem !== selected) $(elem).css("fill", normalColor); }