Question

此网站的目的是使用按钮显示地图，然后让用户单击国家（地区）以通过不可见的<a>标签访问网站。这是通过创建一个在单击后变为非隐藏的画布并根据该按钮更改画布背景来实现的。最终目标是使<a>标记在单击相应按钮时出现，然后在按下另一个按钮时消失。但是，按下按钮时，<a>标签在画布上方而不是在画布中生成。

<!DOCTYPE html>
    <head>
        <meta charset="utf-8">
        <meta  name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Map</title>
        <link rel="stylesheet" href="style.css">
        <script src="map.js"></script>
    </head>
<body>
    <h1>Where do you wanna go?</h1>
    <table>
<!--North America-->
        <tr><td><button id="nA" onclick="northAmerica()">North America</button></tr></td>

            <td><button id="nA2" onclick="nNorthAmerica()">Northern North America</button></td>             

            <td><button id="nA4" onclick="cenAmerica()">Central America</button></td>
                <a href="https://www.google.com/" id="x">HELLO</a>
                <a href="https://www.google.com/" id="y">hello</a>
                <td><canvas class="map" id="c"></canvas></td>   
    </table>

map.js

//NORTH AMERICA
function northAmerica(){

    let nA2 = document.getElementById("nA2");
    let nA3 = document.getElementById("nA3");
    let nA4 = document.getElementById("nA4");

    let x = document.getElementById("x");
    let y = document.getElementById("y");

    nA2.style.display = "block";
    nA3.style.display = "block";
    nA4.style.display = "block";

    var c = document.getElementById("c");

    c.style.display="block";
}

function nNorthAmerica(){
    c.style.backgroundImage = "url('https://i.imgur.com/ipPrjz1.jpg')";
    c.style.backgroundSize = "65em 45em";
    c.style.display="block";
    x.style.display = "block";
}

function cenAmerica(){
    c.style.backgroundImage = "url('https://i.imgur.com/84LVJaY.gif')";
    c.style.backgroundSize = "65em 45em";
    y.style.display = "block";

}

/*The purpose of this block is to hide the elements until they are called upon*/
#nA2, #nA3, #nA4, #c, #x, #y{
    display:none;
}
button{
    width:10em;
    height:5em;
    font:sans-serif;
}
.map{
    width:65em;
    height:35em;
}

我希望函数nNorthAmerica在页面上生成元素x，因为默认情况下它是隐藏的，cenAmerica和y也是一样。但是，我不知道如何在画布中显示<a>标签。

Answer 1

我假设您想在画布上覆盖链接-HELLO和Hello-吗？

这可以通过将 canvas 和 a 元素包装在 div 中来完成。然后，如果将画布的位置属性设置为相对，并且元素绝对，则其原点将位于画布的左上角。

这是一个例子：

function northAmerica() {

  let nA2 = document.getElementById("nA2");
  let nA3 = document.getElementById("nA3");
  let nA4 = document.getElementById("nA4");

  let x = document.getElementById("x");
  let y = document.getElementById("y");

  nA2.style.display = "block";
  nA3.style.display = "block";
  nA4.style.display = "block";

  var c = document.getElementById("c");

  c.style.display = "block";
}

function nNorthAmerica() {
  c.style.backgroundImage = "url('https://i.imgur.com/ipPrjz1.jpg')";
  c.style.backgroundSize = "65em 45em";
  c.style.display = "block";
  x.style.display = "block";
}

function cenAmerica() {
  c.style.backgroundImage = "url('https://i.imgur.com/84LVJaY.gif')";
  c.style.backgroundSize = "65em 45em";
  y.style.display = "block";

}

#nA2,
#nA3,
#nA4,
#c,
#x,
#y {
  display: none;
  position: absolute;
}

button {
  width: 10em;
  height: 5em;
  font: sans-serif;
}

.map {
  width: 65em;
  height: 35em;
  position: relative;
}

<table>
  <tr>
    <td><button id="nA" onclick="northAmerica()">North America</button></tr>
  </td>

  <td><button id="nA2" onclick="nNorthAmerica()">Northern North America</button></td>

  <td><button id="nA4" onclick="cenAmerica()">Central America</button></td>

</table>
<div><canvas class="map" id="c"></canvas>
  <a href="https://www.google.com/" id="x">HELLO</a>
  <a href="https://www.google.com/" id="y">hello</a></div>

如何使用onclick将对象放置在画布中？

1 个答案: