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;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
  <img class="img-responsive" src="http://s11.postimg.org/cbggzlpib/map.png">

  <div class="abs red-point" id="termini">
    <a onClick="turnGreen(event)"></a>
  </div>
  <div class="abs red-point" id="french">
    <a onClick="turnGreen(event)"></a>
  </div>
  <div class="abs red-point" id="mark">
    <a onClick="turnGreen(event)"></a>
  </div>
  <div class="abs red-point" id="hakkasan">
    <a onClick="turnGreen(event)"></a>
  </div>
  <div class="abs red-point" id="american">
    <a onClick="turnGreen(event)"></a>
  </div>
  <div class="abs red-point" id="experiment">
    <a onClick="turnGreen(event)"></a>
  </div>
  <div class="abs red-point" id="milk">
    <a onClick="turnGreen(event)"></a>
  </div>
  <div class="ab red-point" id="pig">
    <a onClick="turnGreen(event)"></a>
  </div>
  <div class="abs red-point" id="opium">
    <a onClick="turnGreen(event)"></a>
  </div>
</div>

<ol>
  <li class="link" data-marker="termini">
    <a>Bar Termini</a>
  </li>
  <li class="link" data-marker="french">
    <a>French House</a>
  </li>
  <li class="link" data-marker="mark">
    <a>Mark's Bar</a>
  </li>
  <li class="link" data-marker="hakkasan">
    <a>Hakkasan (bar)</a>
  </li>
  <li class="link" data-marker="american">
    <a>Bar Americain at Brasserie Zedel</a>
  </li>
  <li class="link" data-marker="experiment">
    <a>Experimental Cocktail Club</a>
  </li>
  <li class="link" data-marker="milk">
    <a>Milk &amp; Honey</a>
  </li>
  <li class="link" data-marker="pig">
    <a>Blind Pig</a>
  </li>
  <li class="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.