Cambiar el color del pin para el elemento activo en el mapa estático

Aquí está el violín:

https://jsfiddle.net/0a0yo575/1/

No hay errores con el JS. Por lo que puedo decir, debería eliminar la clase de “punto rojo” de lo que sea que se haga clic y reemplazarlo con la clase “punto verde”.

if (previousTarget) { previousTarget.className = ""; } event.target.className = "green-point"; 

No estoy muy familiarizado con Javascript, pero usando jQuery puedo solucionar tu problema fácilmente (supongo que está bien ya que tienes la etiqueta jQuery en tu pregunta ;-)). También realicé algunos cambios menores en el CSS, por lo que los pines en el mapa son realmente del tamaño correcto. Además, agregué un cursor: pointer a los pines así que está claro que puedes hacer clic en ellos. Ver el ejemplo que funciona a continuación, o en Fiddle: https://jsfiddle.net/0a0yo575/3/

 $(document).ready(function() { $('.abs').click(function() { $('.abs').removeClass('green-point').addClass('red-point'); $(this).removeClass('red-point').addClass('green-point'); $('.link').css('font-weight', ''); $('.link[data-marker="' + $(this).attr("id") + '"]').css('font-weight', 800); }); $('.link').click(function() { $('.abs').removeClass('green-point').addClass('red-point'); $('#' + $(this).data('marker')).removeClass('red-point').addClass('green-point'); $('.link').css('font-weight', ''); $(this).css('font-weight', 800); }); }); 
  a { cursor: pointer; } .abs { position: absolute; width: 20px; height: 32px; background-position: center center; background-repeat: no-repeat; cursor: pointer; } #termini { top: 37.5%; left: 61.8%; } #french { top: 45.5%; left: 55.1%; } #mark { top: 58%; left: 39.3%; } #hakkasan { top: 65%; left: 12.6%; } #american { top: 62%; left: 42.8%; } #experiment { top: 54%; left: 57.2%; } #milk { top: 37.3%; left: 39.5%; } #pig { top: 37.1%; left: 38.5%; } #opium { top: 55%; left: 55.7%; } div { position: relative; } div.img-responsive { width: 100%; height: 65.5%; } .red-point { background-image: url("http://s23.postimg.org/842300vmv/point.png"); background-position: center center; background-repeat: no-repeat; } .green-point { background-image: url("http://s21.postimg.org/9u6n8t38z/green.png"); background-position: center center; background-repeat: no-repeat; background-size: 30px; } 
  

Su problema es que la etiqueta a dentro del red-point no tiene ancho ni alto, por lo que no puede hacer clic en ella. Darles

 width: 100%; height: 100%; display: block; 

Y tu puedes.