html

<div class="picture-container">

  <!-- Здесь будут располагаться элементы рисунка -->

</div>

css

.picture-container {

  position: relative;

}

html

<div class="picture-container">

  <div class="circle"></div>

  <div class="rectangle"></div>

  <div class="quadrilateral"></div>

  <div class="pentagon"></div>

</div>

css

.circle {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  width: 200px;

  height: 200px;

  border-radius: 50%;

  background-color: #ff0000;

}



.rectangle {

  position: absolute;

  top: 10px;

  left: 50%;

  transform: translateX(-50%);

  width: 200px;

  height: 100px;

  background-color: #00ff00;

}



.quadrilateral {

  position: absolute;

  top: 50%;

  left: 10px;

  transform: translateY(-50%);

  width: 150px;

  height: 150px;

  background-color: #0000ff;

}



.pentagon {

  position: absolute;

  top: 50%;

  right: 10px;

  transform: translateY(-50%);

  width: 150px;

  height: 150px;

  background-color: #ffff00;

}

<a>

href

html

<div class="circle">

  <a href="https://example1.com">

    <span class="text">Example 1</span>

  </a>

</div>

html

<div class="rectangle">

  <a href="https://example2.com">

    <span class="text">Example 2</span>

  </a>

</div>

html

<div class="quadrilateral">

  <a href="https://example3.com">

    <span class="text">Example 3</span>

  </a>

</div>

html

<div class="pentagon">

  <a href="https://example4.com">

    <span class="text">Example 4</span>

  </a>

</div>

css

.text {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  color: #ffffff;

  font-size: 20px;

}

html

<!-- Подключаем файл со скриптом -->

<script src="script.js"></script>

javascript

// Получаем ссылки на фигуры и названия сайтов

var circleLink = document.querySelector('.circle a');

var rectangleLink = document.querySelector('.rectangle a');

var quadrilateralLink = document.querySelector('.quadrilateral a');

var pentagonLink = document.querySelector('.pentagon a');



// Функция для обработки кликов по ссылкам

function handleClick(event) {

  event.preventDefault(); // Отменяем стандартное поведение ссылки

  var url = event.target.getAttribute('href'); // Получаем URL сайта

  window.location.href = url; // Переходим на сайт

}



// Привязываем обработчик к каждой ссылке

circleLink.addEventListener('click', handleClick);

rectangleLink.addEventListener('click', handleClick);

quadrilateralLink.addEventListener('click', handleClick);

pentagonLink.addEventListener('click', handleClick);