Question

我遇到了问题，到目前为止，我还没有找到正确的答案。

我有一张图片（.jpeg格式），您可以在这里https://picload.org/view/dcipdggi/boxed.jpg.html看到。它实际上更大，这只是一部分，因此您将能够了解我想要的内容。

我希望能够单击每个“框”，然后框周围会出现一个边框。基本上是选择。

我尝试了很多事情，并且在Google和这个论坛上都看了很多。我的最终解决方案是，将类型从jpeg更改为svg，然后在每个框周围创建一个笔触，并将笔触填充设置为透明。使用jQuery时，我想到了要点，即使用单击事件，笔触会充满颜色并显示并再次隐藏。

无论如何，就像我在网页上使用CSS网格框一样。通常看起来像这样https://s15.directupload.net/images/190126/5wtqwf9v.jpg

但是将jpeg文件更改为svg文件后，它看起来像这样：

https://s15.directupload.net/images/190126/2i7fj49a.jpg

如您所见；它很混乱。这样绝对不可用。另外，您可能很快就会意识到，我不是javascript / jquery-expert。

所以；有什么办法可以实现我的想法？我真的很感谢您的帮助！

$(document).ready(function(){
 var selected;

  $(".cls-1").click(function(){
  $("#test").show(200);
   $(this).css({"stroke": "#fff", "stroke-width": "4.04px"});
   selected = true;
   return selected;    
  });


 $('#test').click(function(){
  $("#test").hide(200);
  $(".cls-1").css({"stroke": "#fff", "stroke-width": "0px"});
  var selected = false;
  return selected;    
 });

CSS

 html, body, .grid-container {
 height: 100vh;
 margin-left: auto;
 margin-right: auto;
 width: 1200px;
 overflow:hidden;
 margin-top: 0.1%;
}

.grid-container * {

 position: relative;
 border-radius: 13px;

 }

  .grid-container *:after {

   position: absolute;
   top: 0;
   left: 0;
  }


  .grid-container {
    display: grid;
    grid-template-columns: 0.6fr 1fr 1fr 0.6fr;
    grid-template-rows: auto;
    grid-template-areas:
    "block1 Bild-kreuz Bild-kreuz block4"
    "block2 Bild-kreuz Bild-kreuz block5"
    "block3 Bild-kreuz Bild-kreuz block6";
  }

 .Bild-kreuz {  
    grid-area: Bild-kreuz;  
    margin: auto 1% auto 1%; 
 }

.block1 {
  grid-area: block1;
  height: 32vh;
  width: 17vw;
}

.block2 {
  grid-area: block2;
  height: 32vh;
  width: 17vw;
  overflow: hidden;
}

 .block3 {
   grid-area: block3;
   overflow:hidden;
   height: 32vh;
   width: 17vw; 
  }
 .block4 {
   grid-area: block4;
   background-color: black;
   height: 32vh;
   width: 17vw;
  }


 .block5 {  
   grid-area: block5;
   height: 32vh;
   width: 17vw;
 }

  .block6 {
   grid-area: block6;
   height: 32vh;
   width: 17vw;
   }

  .Bild-kreuz{
    margin-bottom: 1%;
   }


    #infokasten-links p{
      font-family: 'Roboto Slab';
      margin: 0.6rem auto auto 0.6rem;
     }

    #infokasten-links{
     background-color: rgb(246, 90, 22);
     color: white;
     }

    #infokasten-links>img{
     width: 15%;
     padding-top: 12%;
      padding-left: 80%;
     position: relative;
    border-radius: 0;
    }

       #infokasten-links:hover{
      -webkit-box-shadow: 0 10px 6px -6px #777;
       -moz-box-shadow: 0 10px 6px -6px #777;
        box-shadow: 0 10px 6px -6px #777;
        transition: ease 200ms;
        cursor: pointer;
       }

    .block5>p {
       font-family: 'Roboto Slab';
       font-size: 12px;
        }

       .block6 > p {
         font-family: 'Roboto Slab';
        font-size: 12px;
       }


       #manfred-video{
         margin: 3rem auto auto auto;
          }

       .borderClass{
         border-color:red;
        border-style:solid;
        }

HTML

    <body>
     <div class="grid-container">

  <div class="Bild-kreuz">
    <img src="assets/img/Kreuz_XL.jpg" style="height: 99vh; width: 100%" usemap="#Kreuz">
  </div>

    <div class="block1" id="infokasten-links">
      <p>
      Bitte wählen Sie </br>einen Kanister aus, <br />Förderpatenschaft!
      </p>
      <img src="assets/img/pfeil-1.png" alt="pfeil-rechts-unten">
    </div>

  <div class="block2" id="projekt-2">
    <img src="assets/img/Sichel_XL.jpg" alt="" style="width: 100%; height: 100%;">
  </div>

  <div class="block3">
    <img src="assets/img/Stern_XL.jpg" alt="" style="width: 100%; height: 100%;">
  </div>

  <div class="block4">

  <iframe width="230" height="129" style="margin-top: 12%;" src="https://www.youtube.com/embed/fJ9rUzIMcZQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>


  </div>

  <div class="block5">
    <img src="assets/img/manfred.jpg" alt="" style="width: 45%;">
    <p>
      ......
          ......
      </p>
  </div>

  <div class="block6">
    <p>
      .......
        ......
      </p>
  </div>
</div>

在这里您可以看到小提琴和我最后的想法：

http://jsfiddle.net/7jehn0o5/ 请单击图片顶部的框之一。

我想要这种效果，但是就像我说的那样，只要将其集成到CSS网格系统中，它就不会像这样工作

Answer 1

这就是我使用SVG的方式。在Javascript中，我使用click事件来更改单击时多边形的笔触。

poly.addEventListener("click",()=>{
  poly.style.stroke="gold";
})

<svg viewBox ="0 0 209 178" width="209" >
  
<image xlink:href="https://img.picload.org/image/dcipdggi/boxed.jpg" />

  <polygon id="poly" fill="transparent"  points="78,25,103,24,106,74,63,78,61,37" />

  
</svg>

另一种实现方法是使用<map>和<area>：

<img src="https://img.picload.org/image/dcipdggi/boxed.jpg" usemap="#name" width="209" height="178" >
<map name="name" >
    <area alt="alt" href="http://example.com" coords="78,25,103,24,106,74,63,78,61,37" shape="poly" >
</map>

在两种情况下，您都需要先获取这些“框”的坐标。

Answer 2

根据我所知道并搜索的内容，可以将常规js和jquery混合使用。但是，我在下面发布的这个概念行不通。是否有适当的方法使其正常工作？非常感谢。

http://jsfiddle.net/czb1py5w/

 poly.addEventListener("click",()=>{ 
  $(#poly).addClass('borderClass'); 
 });

单击图片中的某些区域应该会显示边框

2 个答案: