Changing Pin Colour For Active Item On Static Map

Here's the fiddle: https://jsfiddle.net/0a0yo575/1/ There's no errors with the JS. As far as I can tell, it should remove the 'red-point' class from whatever is clicked and replace

Solution 1:

I'm not very familiar with Javascript, but using jQuery I can easily fix your problem (I'm assuming this is OK since you have the jQuery tag on your question ;-) ). I've also made some minor changes to the CSS so the pins on the map are actually the correct size. Furthermore, I added a cursor: pointer to the pins so it's actually clear that you can click them. See fully working example below, or on 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;
    }

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div><imgclass="img-responsive"src="http://s11.postimg.org/cbggzlpib/map.png"><divclass="abs red-point"id="termini"><aonClick="turnGreen(event)"></a></div><divclass="abs red-point"id="french"><aonClick="turnGreen(event)"></a></div><divclass="abs red-point"id="mark"><aonClick="turnGreen(event)"></a></div><divclass="abs red-point"id="hakkasan"><aonClick="turnGreen(event)"></a></div><divclass="abs red-point"id="american"><aonClick="turnGreen(event)"></a></div><divclass="abs red-point"id="experiment"><aonClick="turnGreen(event)"></a></div><divclass="abs red-point"id="milk"><aonClick="turnGreen(event)"></a></div><divclass="ab red-point"id="pig"><aonClick="turnGreen(event)"></a></div><divclass="abs red-point"id="opium"><aonClick="turnGreen(event)"></a></div></div><ol><liclass="link"data-marker="termini"><a>Bar Termini</a></li><liclass="link"data-marker="french"><a>French House</a></li><liclass="link"data-marker="mark"><a>Mark's Bar</a></li><liclass="link"data-marker="hakkasan"><a>Hakkasan (bar)</a></li><liclass="link"data-marker="american"><a>Bar Americain at Brasserie Zedel</a></li><liclass="link"data-marker="experiment"><a>Experimental Cocktail Club</a></li><liclass="link"data-marker="milk"><a>Milk &amp; Honey</a></li><liclass="link"data-marker="pig"><a>Blind Pig</a></li><liclass="link"data-marker="opium"><a>Opium</a></li></ol>

Solution 2:

Your problem is that the a tag inside the red-point has no width and no height, so you cannot click it. Give them

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

And you can.