Prevent randomly placed images from appearing in a certain spot (javascript)

I'm quite new to javascript, but I have been trying to use it. I've written a (too lengthy) code that places images randomly on the page. Now I want to make sure the images don't appear behind two menus on the page, but I'm unable to find a functional way of doing this.

The blue highlighted areas are the areas I don't want the images to appear behind:

The code I have so far:

(function() {
  var w = window.innerWidth;
  var h = window.innerHeight;

  var urls = ['0', '1', '2', '3', '4'];
  var imageUrl1 = urls[Math.round(Math.random() * urls.length)];
  while (typeof imageUrl1 === 'undefined') {
    var imageUrl1 = urls[Math.round(Math.random() * urls.length)];
  }
  var imageUrl2 = urls[Math.round(Math.random() * urls.length)];
  while (typeof imageUrl2 === 'undefined' | imageUrl2 == imageUrl1) {
    var imageUrl2 = urls[Math.round(Math.random() * urls.length)];
  }
  var imageUrl3 = urls[Math.round(Math.random() * urls.length)];
  while (typeof imageUrl3 === 'undefined' | imageUrl3 == imageUrl1 | imageUrl3 == imageUrl2) {
    var imageUrl3 = urls[Math.round(Math.random() * urls.length)];
  }

  function swap() {
    /* IMAGE 1 */
    var image1 = document.getElementById('image1');

    image1.setAttribute('src', 'images/' + imageUrl1 + '.jpg');
    imageWidth = window.innerWidth / 2.5 + Math.round(Math.random() * 100);
    image1.setAttribute('width', imageWidth);

    var availW = w - image1.clientWidth;
    image1.onload = function() {
      let availH = h - this.height;
      let image1Y = Math.round(Math.random() * availH) + 'px';
      image1.style.top = image1Y;
    }
    var image1X = Math.round(Math.random() * availW) + 'px';

    image1.style.left = image1X;

    /* IMAGE 2 */
    var image2 = document.getElementById('image2');

    image2.setAttribute('src', 'images/' + imageUrl2 + '.jpg');
    imageWidth = window.innerWidth / 3 - Math.round(Math.random() * 250);
    while (imageWidth < 200) {
      imageWidth = window.innerWidth / 3 + Math.round(Math.random() * 150);
    }
    image2.setAttribute('width', imageWidth);

    var availW = w - image1.clientWidth;
    image2.onload = function() {
      let availH = h - this.height;
      var image2Y = Math.round(Math.random() * availH) + 'px';
      image2.style.top = image2Y;
    }
    var image2X = Math.round(Math.random() * availW) + 'px';

    image2.style.left = image2X;

    /* IMAGE 3 */
    var image3 = document.getElementById('image3');

    image3.setAttribute('src', 'images/' + imageUrl3 + '.jpg');
    imageWidth = window.innerWidth / 2.5 - Math.round(Math.random() * 350);
    while (imageWidth < 80) {
      imageWidth = window.innerWidth / 2.5 - Math.round(Math.random() * 150);
    }
    image3.setAttribute('width', imageWidth);

    var availW = w - image1.clientWidth;
    image3.onload = function() {
      let availH = h - this.height;
      var image3Y = Math.round(Math.random() * availH) + 'px';
      image3.style.top = image3Y;
    }
    var image3X = Math.round(Math.random() * availW) + 'px';

    image3.style.left = image3X;
  }


  // Mozilla, Opera and webkit nightlies currently support this event
  if (document.addEventListener) {
    window.addEventListener('load', swap, false);
    // If IE event model is used
  } else if (document.attachEvent) {
    window.attachEvent('onload', swap);
  }

})();

<img id="image1" />

<img id="image2" />

<img id="image3" />

How do I make sure the images don't appear behind these text blocks?