CODEWITHSUNDEEP
javascriptjquerysvg
billie
billie

Reputation: 23

click on certain area in picture is supposed to make a border appear

I have got a problem and so far i have not found a proper answer.

I have got a picture (.jpeg format) which you can see here https://picload.org/view/dcipdggi/boxed.jpg.html . Its actually much bigger, this is just a part, so you will be able to understand what i want.

I would like to be able to click on each "box" and then there should appear a border around the box. Basically a selection.

I have tried SO MANY things and looked alot on google and this forum as well. My final solution was, that i changed the type from jpeg to svg, then created a stroke around each box and set the stroke-fill to transparent. With jQuery I got to the point, where (using a click-event) the stroke gets filled with colour and shows up and hides again.

Anyway, as I am using CSS Grid box on my webpage.Normally it looks like this https://s15.directupload.net/images/190126/5wtqwf9v.jpg

but after changing the jpeg file to a svg file it looked like this:

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

As you can see; its pretty messed up. Its absolutely not usable like this. Plus, as you will probably realise pretty quickly, that i am not a javascript/jquery-expert.

So; would there be any way to fulfill my idea? I would really appreciate some help!

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

Here you can see the fiddle with my last ideas:

http://jsfiddle.net/7jehn0o5/ Please click on one of the boxes in the top of the picture.

I wann ahave this effect but like i said, it dows not work like this as soon as i integrate it in my css grid system

Upvotes: 0

Views: 86

Answers (2)

billie
billie

Reputation: 23

from what I know and searched for you can mix regular js and jquery. However this conception that i posted below does not work. Is there a proper way to make it work? Thanks a lot.

http://jsfiddle.net/czb1py5w/

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

Upvotes: 0

enxaneta
enxaneta

Reputation: 33054

This is how I would do it using SVG. In Javascript I'm using a click event to change the stroke of the polygon on 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>

Yet an other way of doing it would be using <map> and <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>

In both cases you need ato get first the coords of those "boxes".

Upvotes: 1

Related Questions