时间戳

首页 > 解决方案 > javascript中的onclick事件在图像的非透明部分

javascript - javascript中的onclick事件在图像的非透明部分

问题描述

有没有办法onclick只在图像的非透明部分发生事件？我一直在研究一张地图，上面有路线，我想当我点击那条路线时，会显示一个带有该图像指定名称的警报。路线图像是透明图像，仅具有与地图一样大并且与地图处于相同位置（因此它们与地图重叠）的线（路线）。

该图像的屏幕截图：
在此处输入图像描述

链接到项目文件夹： https ://drive.google.com/drive/folders/16LkgzhQQdP1J05n5y9PfShPGxHDwUgX7?usp=sharing

const links = ["břízkyff0000.png", "pekelné hrby0000ff.png", "vébr00ff00.png", "palyza000000.png", "pařízkáčffff00.png"];
var names = [];
var rgb = [];
for (let i = 0; i < links.length; i++){
    rgb.push(links[i].substring((links[i].length -10), (links[i].length -4)));
    names.push (links[i].substring (0,links[i].length -10));
}


var trailstate = 0;
window.onload = function() {
    for (let i = 0; i < links.length; i++) {
        document.getElementById('maploc').innerHTML += `<img class = "trail" id="trail${i}" src = "routes/${links[i]}">`;
        document.getElementById('list').innerHTML += `<p style="color:#${rgb[i]};">${i+1} - ${names [i]}<p>`;
    }
};



function numbut() {
    document.getElementById('maploc').innerHTML = '';
    if (trailstate == 0){
        document.getElementById('trailstatebut').innerHTML = 'Zapnout čísla';
        var i = 0;
        for (link of links) {
            document.getElementById('maploc').innerHTML += `<img class = "trail" id="trail${i}" src = "routeswithoutnum/${link}">`;
            i += 1;
        }
        trailstate = 1;
    }
    else if (trailstate == 1){
        document.getElementById('trailstatebut').innerHTML = 'Vypnout čísla';
        var i = 0;
        for (link of links) {
            document.getElementById('maploc').innerHTML += `<img class = "trail" id="trail${i}" src = "routes/${link}">`;
            i += 1;
        }
        trailstate = 0;
    }
}
html, body , .container {
  height: 100%;
  margin: 0;
}

body{
  background-color: #292929;
  font-family: 'Acme';
  height: 100%;
  margin: 0;
}
.container * {
  position: relative;
}

.container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2fr auto 4fr;
  gap: 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "title"
    "map"
    "list";
}

.title {
  grid-area: title;
  font-size:calc(40px + 1.5vh);
  display: flex;
  justify-content: center;
  align-items: center;
  color: #f77700;
}

.list {
  grid-area: list;
  width: 90%;
  left: 5%;
  top: 5%;
}
.list p{
  color: #999999;
  font-size:calc(15px + 1vh);
}

.map {
  grid-area: map;

}
.mappic{
  padding-top: 80%;
  width: 90%;
  top: 0;
  left: 5%;
  right: 5%;
  border-radius: 15px;
  border: 10px solid #1b1b1b ;
  background-image: url("mapa.png");
  background-size: 100% 100%;
  position: relative;
}
.trail{
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  position: absolute;
  background-size: 100% 100%;
}
.but {
  position: fixed;
  bottom: 2%;
  right: 2%;
  height: calc(15px+5%);
  width: calc(50px+18%);
  border-radius: 5px;
  border: 2px solid #ff7b00;
  background-color: #080808;
  color: #b6b6b6;
}
<!DOCTYPE html>
<html lang="cs">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ressl map</title>
    <link href='https://fonts.googleapis.com/css?family=Acme' rel='stylesheet'>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
</head>
<body>

    <div class="container">
        <div class="title">Ressl map</div>
        <div class="map">
            <div class="mappic" id="maploc"></div>
        </div>
        <div class="list" id="list"></div>
        <button id="trailstatebut" class="but" onclick="numbut()">Vypnout čísla</button>
    </div>

    
</body>
</html>

标签： javascripthtmlcss

解决方案

推荐阅读