Changing img using an event onclick function using javascript

I'm having a hard time understanding why my page won't change every time I click on a specific attribute.

I have my html of where my first image is located:

<!-- Face Column Starts -->
      <div class="col-md-4">
        <div class="float-right" id="face">
          <!-- Image size: 587 width x 419 height -->
          <img src="../static/images/face.png" alt="" width="350" usemap="#facemap" href="#face" class="face" onlick="changeProduct()">
          <map name="facemap">
            <div class="blush">
              <area  shape="circle" coords="260,185,25" href="#blush" alt="blush" onclick="changeProduct()">
              <area shape="circle" coords="100,185,25" href="#blush" alt="blush" onclick="changeProduct()">
            </div>
            <div class="eyeshadow">
              <area  alt="eyeshadow" id="right" href="#eyeshadow" shape="poly" coords="222,116,230,102,245,90,265,83,286,84,318,100,312,109,290,98,259,100,222,116 " onclick="changeProduct()">
              <area alt="eyeshadow" id="left" href="#eyeshadow" shape="poly" coords="133,116,113,106,78,97,45,105,38,104,65,80,89,80,90,81,97,83,105,86,133,116" onclick="changeProduct()">
            </div>
            <div class="eyeliner">
              <area  alt="eyeliner" id="right" href="#eyeliner" shape="poly" coords="220,118,259,100,275,100,295,100,305,105,315,110,300,115,275,122,259,124,222,118 " onclick="changeProduct()">
              <area alt="eyeliner" id="left" href="#eyeliner" shape="poly" coords="131,118,113,106,78,97,42,107,65,120,89,126,105,124,133,118" onclick="changeProduct()">
            </div>
            <area class="foundation" shape="rect" coords="0,419,587,0" href="#foundation" alt="foundation" onclick="changeProduct()">
          </map>
        </div>
      </div>
      <!-- Face Column Ends -->

I used a map so that I can click on different regions of the face. When I do that, I'd like it to alternate between a different picture.

This is what I used in my javascript file:

    var image =  document.getElementById("face");

    function changeProduct() {
        if (image.getAttribute('alt') == "blush") {
            image.src = "../image/blush.png";
        } else if (image.getAttribute('alt') === "foundation") {
            image.src = "../image/foundation.png";
        } else if (image.getAttribute('alt') === "eyeshadow") {
            image.src = "../image/eyeshadow.png";
        } else {
            image.src = "../image/eyeliner.png";
        }
    }

Expected output: When I click on the blush (cheeks) my image goes from face! to blush!

However, I see no change.

Can someone please help clarify what I'm doing wrong?

UPDATE: When I click on any part of the face I get a 'Uncaught TypeError: image.getAttribute is not a function' on line 5 of my JS file.