Javascript 点击图片中的某个区域应该会出现边框_Javascript_Jquery_Svg

Javascript 点击图片中的某个区域应该会出现边框

javascript jquery svg

Javascript 点击图片中的某个区域应该会出现边框,javascript,jquery,svg,Javascript,Jquery,Svg,我有一个问题，到目前为止我还没有找到一个正确的答案我有一张图片（.jpeg格式），你可以在这里看到。它实际上要大得多，这只是一部分，所以你可以理解我想要什么我想能够在每个“框”点击，然后应该有一个框周围出现一个边框。基本上是一种选择我尝试了很多东西，在谷歌和这个论坛上也看了很多。我的最终解决方案是，我将类型从jpeg更改为svg，然后在每个框周围创建一个笔划，并将笔划填充设置为透明。使用jQuery，我达到了一个关键点，即（使用单击事件）笔划被颜色填充，并再次显示和隐藏无论如何，因为我

我有一个问题，到目前为止我还没有找到一个正确的答案

我有一张图片（.jpeg格式），你可以在这里看到。它实际上要大得多，这只是一部分，所以你可以理解我想要什么

我想能够在每个“框”点击，然后应该有一个框周围出现一个边框。基本上是一种选择

我尝试了很多东西，在谷歌和这个论坛上也看了很多。我的最终解决方案是，我将类型从jpeg更改为svg，然后在每个框周围创建一个笔划，并将笔划填充设置为透明。使用jQuery，我达到了一个关键点，即（使用单击事件）笔划被颜色填充，并再次显示和隐藏

无论如何，因为我在我的网页上使用CSS网格框。通常它看起来像这样

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

如你所见；真是一团糟。它绝对不能像这样使用。另外，您可能很快就会意识到，我不是javascript/jquery专家

所以,；有没有办法实现我的想法？我真的非常感谢你的帮助

$(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



你是我的朋友，你是我的朋友！


......
......


.......
......

在这里你可以看到我最后的想法：

请点击图片顶部的一个方框

我希望有这样的效果，但正如我所说的，只要我将它集成到css网格系统中，它就不会像这样工作。在Javascript中，我使用单击事件来更改单击时多边形的笔划

poly.addEventListener（“单击”，（）=>{
poly.style.stroke=“gold”；
})

据我所知和搜索，您可以混合使用常规js和jquery。然而，我在下面发布的这个概念不起作用。有没有合适的方法让它工作？非常感谢

为了帮助我们解决这个问题，您需要发布您的（相关的）“”代码，这样我们就可以看到您使用的是什么，而无需猜测。这是我唯一使用的jquery/js代码。如果有用的话，我可以发布css代码。什么是

.cls-1

？。cls-1是svg方块的一部分，应该出现在方块周围。这是我的最后一个想法：请点击顶部的一个“盒子”嗨，谢谢你的回答。我感谢你的建议，不幸的是我已经尝试过了（我可能应该在我的第一篇文章中说，对不起！）。但不知何故，它不能正常工作：我使用CSS网格，因为在这个项目中，响应性非常重要，我找不到比CSS网格更好的方法（关于不同高度的框的布局）。因此，我试图通过主图片（“框”-图片）+保持响应性，这只有在使用SVG时才能实现。或者还有其他可能性吗？我认为SVG是最好的选择。请看我的第一个例子。如果需要，请删除宽度并仅保留viewBox属性。我会确定，谢谢。不过，您的第一个示例在这里和小提琴中都不起作用。有什么我不明白的，我可以让它出现吗？谢谢！编辑：明白了，xlink中缺少高度和宽度属性。

 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;
        }

    <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>

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