如何使背景图像的某些部分可点击

时间:2019-07-29 14:43:52

标签: javascript jquery html

我的网站上有一个主页Takover。并且我已经编写了将图像显示为背景图像的代码,并且可以单击。

但是我需要图像的某些部分需要可点击到另一个URL。

<!DOCTYPE html>
<html>
<head>




  <title>asdfasdf</title>
</head>
<body>
<div>


<script>
if (top == self) {
  var interWindow = window;
  var interDoc = window.document;
} else {
  try {
    var interWindow = window.parent;
    var interDoc = window.parent.document;
  } catch (e) {
    /* The creative cannot escape the iframe. Show an appropriate alternative. The alternative will remain inside of the iframe. */
  }
}
var timeDelay = 0;
var backgroundColor = '#ffffff';

function initBackground() {
  high = window.screen.height;
  size = window.screen.width;
  if (size <= 1280) {
    interDoc.body.style.backgroundImage = none;
  } else if (size > 1280 && size < 1440) {
    interDoc.body.style.backgroundImage = "url(https://i.ibb.co/L9hnZJ1/hpto.gif)";
  } else {
    interDoc.body.style.backgroundImage = "url(https://i.ibb.co/L9hnZJ1/hpto.gif)";
  }
  if (backgroundColor != '') {
    interDoc.body.style.backgroundColor = backgroundColor;
  }
  interDoc.body.style.backgroundRepeat = 'no-repeat';
  interDoc.body.style.backgroundPosition = 'top center';
  interDoc.body.style.backgroundAttachment = 'fixed';
  interDoc.onclick = backGroundClick;
}
var backGroundClick = function (e) {
  if (document.all) {
    if (event.button == 2 || event.button == 3) {
      return false;
    }
  } else {
    if (e.button == 2 || e.button == 3) {
      e.preventDefault();
      e.stopPropagation();
      return false;
    }
  }
  var link = 'google.com';
  EE = e ? e : event;
  if (!EE) {
    return;
  }
  var t = EE.target ? EE.target : EE.srcElement;
  if (t.tagName == "BODY" || t.tagName == "HTML" || t.tagName == "HEADER" ||  t.tagName == "SECTION" || t.tagName == "FOOTER") {
    var ad = window.open("" + link);
  } else {
    console.log('link click event: ' + t.tagName);
  }
}
interDoc.onmouseover = function (e) {
  EE = e ? e : event;
  if (!EE)
    return;
  var t = EE.target ? EE.target : EE.srcElement;
  if (t.tagName == "BODY" || t.tagName == "HTML" || t.tagName == "HEADER" ||  t.tagName == "SECTION" ||  t.tagName == "FOOTER") {
    interDoc.body.parentNode.style.cursor = 'pointer';
  } else {
    interDoc.body.parentNode.style.cursor = 'auto';
  }
}
window.setTimeout("initBackground();", timeDelay);
</script>


</div>
</body>
</html>

点击时,背景图片中红色突出显示的部分需要重定向到另一个URL。

0 个答案:

没有答案