如何超链接 JavaScript 中的图像

Question

我想在具有此 JSON 的图像上设置 hyperlink：{url: 'img/enf.png', x: 1200, y: 530, offset: -0.1} 视差效果，所以如果您单击此图像，您会转到 "news.html".

我目前拥有的代码：

<html>
<head>
  <style>
  body{
    margin:0;
    overflow-x: hidden;
  }
  #pozadi{
    background-image: url(img/pozadi.png);
    overflow: hidden;

    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;

    position: relative;
    min-height: 500px;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  </style>
</head>
<body>
    <div id="pozadi">
      <div id="container"></div>
    </div>
  <script src="tweenmax.js"></script>
  <script src="snapsvg.js"></script>
  <script>

  if (screen.width > 1200){
  var assets = [
    {url: 'img/vybuch.png', x: 0, y: 60, offset: -0.25},
    {url: 'img/psi.png', x: 200, y: 80, offset: -0.2},
    {url: 'img/kour.png', x: 120, y: 280, offset: -0.15},
    {url: 'img/enf.png', x: 1200, y: 530, offset: -0.1},
    {url: 'img/csf.png', x: -40, y: 530, offset: -0.1},
    {url: 'img/nadpis.png', x: 350, y: 530, offset: 0.01},
    {url: 'img/sbt.png', x: 610, y: 665, offset: 0.01},
  ],
  layers = [],

      w = screen.width,
      h = screen.height,
      loaded = 0,
      container = document.getElementById('container'),
      s = new Snap(w, h);

  container.appendChild(s.node);

  g = s.g();
  c = s.g();
  c.attr({transform: 'scale(1)'});
  g.append(c);

  for (var i = 0; i < assets.length; i++) {
    var img = new Image();
    img.src = assets[i].url;
    img.onload = handle_load;

    /*Start my code*/
    if (i==3) { //3 is your 'img/enf.png', or check the string in img.src 
        img.onclick = function(e){
            window.location.href = 'www.debil.cz';
        }
    }
    /*End my code*/

    var _img = s.image(assets[i].url, assets[i].x, assets[i].y);
    c.append(_img);
    layers.push(_img);
  }


  function handle_load(e) {
    loaded += 1;

    if (loaded == assets.length) {
      handle_loaded();
    }
  }

  function handle_loaded() {

    container.addEventListener('mousemove', handle_mousemove);
    container.addEventListener('mouseout', handle_mouseout);
    container.addEventListener('mouseover', handle_mouseover);
  }

  function handle_mousemove(e) {
    var dx = e.offsetX - (w / 2);
    var dy = e.offsetY - (h / 2);

    for (var i = 0; i < layers.length; i += 1) {
      var l = layers[i];
      var _x = dx * assets[i].offset;
      var _y = dy * assets[i].offset;
      TweenMax.to(l.node, 0.1, {x: _x, y: _y});
    }
  }

  function handle_mouseout(e) {
    for (var i = 0; i < layers.length; i += 1) {
      var l = layers[i];
      TweenMax.to(l.node, 0.2, {x: 0, y: 0, ease: Quad.easeOut});
    }

    TweenMax.to(s.node, 0.2, {scale: 0.9, rotationY: 0, rotationX: 0, ease: Quad.easeOut});
    TweenMax.to(c.node, 1, {rotationY: 0, rotationX: 0});
  }

  function handle_mouseover(e) {
    TweenMax.to(s.node, 0.2, {scale: 1, ease: Back.easeOut});
  }

  function angleToPoints(angle) {
    var segment = Math.floor(angle / Math.PI * 2) + 2;
    var diagonal =  (1/2 * segment + 1/4) * Math.PI;
    var op = Math.cos(Math.abs(diagonal - angle)) * Math.sqrt(2);
    var x = op * Math.cos(angle);
    var y = op * Math.sin(angle);

    return {
      x1: x < 0 ? 1 : 0,
      y1: y < 0 ? 1 : 0,
      x2: x >= 0 ? x : x + 1,
      y2: y >= 0 ? y : y + 1
    };
  }
}else if (screen.width > 600){
  var assets = [
    {url: 'img/vybuch_tablet.png', x: -450, y: 80, offset: -0.25},
    {url: 'img/psi_tablet.png', x: -280, y: 140, offset: -0.2},
    {url: 'img/kour_tablet.png', x: -220, y: 350, offset: -0.15},
    {url: 'img/enf_tablet.png', x: 470, y: 830, offset: -0.1},
    {url: 'img/csf_tablet.png', x: 85, y: 830, offset: -0.1},
    {url: 'img/nadpis_tablet.png', x: 5, y: 610, offset: 0.01},
    {url: 'img/sbt_tablet.png', x: 150, y: 740, offset: 0.01},
  ],
  layers = [],

      w = screen.width,
      h = screen.height,
      loaded = 0,
      container = document.getElementById('container'),
      s = new Snap(w, h);

  container.appendChild(s.node);

  g = s.g();
  c = s.g();
  c.attr({transform: 'scale(1)'});
  g.append(c);

  for (var i = 0; i < assets.length; i++) {
    var img = new Image();
    img.src = assets[i].url;
    img.onload = handle_load;

    var _img = s.image(assets[i].url, assets[i].x, assets[i].y);
    c.append(_img);
    layers.push(_img);
  }


  function handle_load(e) {
    loaded += 1;

    if (loaded == assets.length) {
      handle_loaded();
    }
  }

  function handle_loaded() {

    container.addEventListener('mousemove', handle_mousemove);
    container.addEventListener('mouseout', handle_mouseout);
    container.addEventListener('mouseover', handle_mouseover);
  }

  function handle_mousemove(e) {
    var dx = e.offsetX - (w / 2);
    var dy = e.offsetY - (h / 2);

    for (var i = 0; i < layers.length; i += 1) {
      var l = layers[i];
      var _x = dx * assets[i].offset;
      var _y = dy * assets[i].offset;
      TweenMax.to(l.node, 0.1, {x: _x, y: _y});
    }
  }

  function handle_mouseout(e) {
    for (var i = 0; i < layers.length; i += 1) {
      var l = layers[i];
      TweenMax.to(l.node, 0.2, {x: 0, y: 0, ease: Quad.easeOut});
    }

    TweenMax.to(s.node, 0.2, {scale: 0.9, rotationY: 0, rotationX: 0, ease: Quad.easeOut});
    TweenMax.to(c.node, 1, {rotationY: 0, rotationX: 0});
  }

  function handle_mouseover(e) {
    TweenMax.to(s.node, 0.2, {scale: 1, ease: Back.easeOut});
  }

  function angleToPoints(angle) {
    var segment = Math.floor(angle / Math.PI * 2) + 2;
    var diagonal =  (1/2 * segment + 1/4) * Math.PI;
    var op = Math.cos(Math.abs(diagonal - angle)) * Math.sqrt(2);
    var x = op * Math.cos(angle);
    var y = op * Math.sin(angle);

    return {
      x1: x < 0 ? 1 : 0,
      y1: y < 0 ? 1 : 0,
      x2: x >= 0 ? x : x + 1,
      y2: y >= 0 ? y : y + 1
    };
  }
}else{
  var assets = [
    {url: 'img/vybuch_phone.png', x: 0, y: 0, offset: -0.25},
    {url: 'img/psi_phone.png', x: -400, y: 0, offset: -0.2},
    {url: 'img/kour_phone.png', x: -300, y: 100, offset: -0.15},
    {url: 'img/enf_phone.png', x: 200, y: 540, offset: -0.1},
    {url: 'img/csf_phone.png', x: 20, y: 540, offset: -0.1},
    {url: 'img/nadpis_phone.png', x: 30, y: 430, offset: 0.01},
    {url: 'img/sbt_phone.png', x: 65, y: 495, offset: 0.01},
  ],
  layers = [],

      w = screen.width,
      h = screen.height,
      loaded = 0,
      container = document.getElementById('container'),
      s = new Snap(w, h);

  container.appendChild(s.node);

  g = s.g();
  c = s.g();
  c.attr({transform: 'scale(1)'});
  g.append(c);

  for (var i = 0; i < assets.length; i++) {
    var img = new Image();
    img.src = assets[i].url;
    img.onload = handle_load;

    var _img = s.image(assets[i].url, assets[i].x, assets[i].y);
    c.append(_img);
    layers.push(_img);
  }


  function handle_load(e) {
    loaded += 1;

    if (loaded == assets.length) {
      handle_loaded();
    }
  }

  function handle_loaded() {

    container.addEventListener('mousemove', handle_mousemove);
    container.addEventListener('mouseout', handle_mouseout);
    container.addEventListener('mouseover', handle_mouseover);
  }

  function handle_mousemove(e) {
    var dx = e.offsetX - (w / 2);
    var dy = e.offsetY - (h / 2);

    for (var i = 0; i < layers.length; i += 1) {
      var l = layers[i];
      var _x = dx * assets[i].offset;
      var _y = dy * assets[i].offset;
      TweenMax.to(l.node, 0.1, {x: _x, y: _y});
    }
  }

  function handle_mouseout(e) {
    for (var i = 0; i < layers.length; i += 1) {
      var l = layers[i];
      TweenMax.to(l.node, 0.2, {x: 0, y: 0, ease: Quad.easeOut});
    }

    TweenMax.to(s.node, 0.2, {scale: 0.9, rotationY: 0, rotationX: 0, ease: Quad.easeOut});
    TweenMax.to(c.node, 1, {rotationY: 0, rotationX: 0});
  }

  function handle_mouseover(e) {
    TweenMax.to(s.node, 0.2, {scale: 1, ease: Back.easeOut});
  }

  function angleToPoints(angle) {
    var segment = Math.floor(angle / Math.PI * 2) + 2;
    var diagonal =  (1/2 * segment + 1/4) * Math.PI;
    var op = Math.cos(Math.abs(diagonal - angle)) * Math.sqrt(2);
    var x = op * Math.cos(angle);
    var y = op * Math.sin(angle);

    return {
      x1: x < 0 ? 1 : 0,
      y1: y < 0 ? 1 : 0,
      x2: x >= 0 ? x : x + 1,
      y2: y >= 0 ? y : y + 1
    };
  }
}
  </script>
</body>
</html>

我曾尝试在我的 html 中使用 href 属性使用 a 标签来做到这一点，但它完全破坏了视差效果。

我不是javascript方面的专家，我只是更改了我找到的代码并且它工作得很好，但是在我的项目中，我肯定需要在图像上设置一个link。你知道怎么做吗？

Answer 1

尝试这样的事情（进入第一个）：

 for (var i = 0; i < assets.length; i++) {
    var img = new Image();
    img.src = assets[i].url;
    img.onload = handle_load;

    /*Start my code*/
    if (i==3) { //3 is your 'img/enf.png', or check the string in img.src 
        img.onclick = function(e){
            window.location.href = 'the link of your news.html';
        }
    }
    /*End my code*/

    var _img = s.image(assets[i].url, assets[i].x, assets[i].y);
    c.append(_img);
    layers.push(_img);

  }

编辑

你是对的，我们错了。

首先，你的代码生成的是一个SVG，SNAP库的点击事件是这样的：http://snapsvg.io/docs/#Element.click

因此，上面的代码必须这样修改：

for (var i = 0; i < assets.length; i++) {
    var img = new Image();
    img.src = assets[i].url;
    img.onload = handle_load;

    var _img = s.image(assets[i].url, assets[i].x, assets[i].y);

    /*Start my code*/
    if (i==3) {
        _img.click(function(){
            //window.location.href = 'www.debil.cz';
            alert('yeah');
        });
    }
    /*End my code*/


    c.append(_img);
    layers.push(_img);
}

但是

你必须记住： 视差效果作用于图层，如果下面有"invisible"元素，则不会触发点击事件（作为 PNG 的空白区域）。

这是一个工作示例，但需要单击前景中的项目！！ https://jsfiddle.net/StepBaro/hachn1sL/3/

这是另一个工作示例，点击第三个元素，事件仅在最顶部触发（因为第一个在上面）。 https://jsfiddle.net/StepBaro/hachn1sL/4/

您的资产数组已将最高元素作为最后一项插入。

Answer 2

这未经测试，但根据您提供的信息，这可能有所帮助。

  for (var i = 0; i < assets.length; i++) {
    var img = new Image();
    img.src = assets[i].url;
    img.onload = handle_load;

    //use an if statement to grab correct asset
    //change page on click
    if (img.src === "img/vybuch.png") {
      img.onclick = function(e) {
        document.location = "http://www.google.com/";
      }
    }

    var _img = s.image(assets[i].url, assets[i].x, assets[i].y);
    c.append(_img);
    layers.push(_img);
  }

示例：

var assets = [
{url: 'http://www.livefirelabs.com/images/learn-unix-demo-course.jpg', x: 0, y: 60, offset: -0.25},
]

for (var i = 0; i < assets.length; i++) {
        var img = new Image();
        img.src = assets[i].url;
        img.onload = handle_load;

        //use an if statement to grab correct asset
        //change page on click
        if (img.src === "http://www.livefirelabs.com/images/learn-unix-demo-course.jpg") {
          img.onclick = function(e) {
            document.location = "https://jsfiddle.net/";
          }
        }
        
       
        document.body.appendChild(img);
      }

function handle_load() {
//do nothing
}

如何超链接 JavaScript 中的图像

How to hyperlink an image in JavaScript

javascript

hyperlink

parallax

编辑