图片热区，后端返回位置 计算 数值 在页面化框

这个是最终效果  点击不同的图片位置 化出对应的内容  类似人民日报

下面是代码

let back = document.querySelector(".fanhui");
back.onclick = function () {
  history.go(-1)

}
$(document).ready(function () {
  // 这里放置需要在页面加载完成后执行的代码
  let inputImg = $('#pageimage').val(); // 使用 jQuery 获取 input 元素的 value
  let newscoords = $('#newscoords').val(); // 使用 jQuery 获取 input 元素的 value
  $('.baoSrc img').attr('src', inputImg)


  var coords = newscoords.split(',');
  let width = 409
  let height = 606
  setTimeout(() => {
    // 获取图的宽高
    let width1 = $('#img').width()
    let height1 = $('#img').height()
    // 计算比例 图片本来尺寸 和渲染尺寸
    let wd = width1 / width
    let wh = height1 / height
    console.log(wd, wh, '22');
    const container = document.getElementById('container');

    // 左上角点
    const leftTopPoint = document.createElement('div');
    leftTopPoint.classList.add('point');
    leftTopPoint.style.left = `${coords[0] * wd}px`;
    leftTopPoint.style.top = `${coords[1] * wh}px`;
    // container.appendChild(leftTopPoint);

    // 右上角点
    const rightTopPoint = document.createElement('div');
    rightTopPoint.classList.add('point');
    rightTopPoint.style.left = `${coords[2] * wd}px`;
    rightTopPoint.style.top = `${coords[3] * wh}px`;
    // container.appendChild(rightTopPoint);

    // 右下角点
    const rightBottomPoint = document.createElement('div');
    rightBottomPoint.classList.add('point');
    rightBottomPoint.style.left = `${coords[4] * wd}px`;
    rightBottomPoint.style.top = `${coords[5] * wh}px`;
    // container.appendChild(rightBottomPoint);

    // 左下角点
    const leftBottomPoint = document.createElement('div');
    leftBottomPoint.classList.add('point');
    leftBottomPoint.style.left = `${coords[0] * wd}px`;
    leftBottomPoint.style.top = `${coords[7] * wh}px`;
    // container.appendChild(leftBottomPoint);

    let toph = `${coords[7] * wh}` - `${coords[1] * wh}`
    let leftw = `${coords[2] * wd} ` - ` ${coords[0] * wd}`


    $('.baoSrc').append("<div id='areaSharp' class='areaSharp' style='position:absolute; z-index: 5000;  '></div>");
    $("#areaSharp").css({
      left: leftTopPoint.style.left = `${coords[0] * wd}px`,
      top: leftTopPoint.style.top = `${coords[1] * wh}px`,
      width: leftw + "px",
      height: toph + "px",
      // "background-color": "#D9D9D9",
      "border": "1px solid red",
      // "opacity": "0.5"
    });
    $('#areaSharp').show();
  }, 300);



});

图片热区