Linking pictures with strokes

Question

Linking pictures with strokes

I attempted to create a matching pairs quiz using lines. I have several images on the left and several images on the right, and I want to connect them with lines when they are clicked. The connection should be flexible so that if image 1 on the left is connected to image 3 on the right, a line will appear connecting them. If I then click on image 1 on the right and image 2 on the left, the previous line should be deleted, and a new line between those two images should be created. Html snippet:

function lineDistance(x, y, x0, y0){
    return Math.sqrt((x -= x0) * x + (y -= y0) * y);
};

function drawLine(a, b, line) {
  var pointA = $(a ).offset();
  var pointB = $(b).offset();
  var pointAcenterX = $(a).width() / 2;
  var pointAcenterY = $(a).height() / 2;
  var pointBcenterX = $(b).width() / 2;
  var pointBcenterY = $(b).height() / 2;
  var angle = Math.atan2(pointB.top - pointA.top, pointB.left - pointA.left) * 180 / Math.PI;
  var distance = lineDistance(pointA.left, pointA.top, pointB.left, pointB.top);

 // Set Angle
  $(line).css('transform', 'rotate(' + angle + 'deg)');


  // Set Width
  $(line).css('width', distance + 'px');
                  
  // Set Position
  $(line).css('position', 'absolute');
  if(pointB.left < pointA.left) {
    $(line).offset({top: pointA.top + pointAcenterY, left: pointB.left + pointBcenterX});
  } else {
    $(line).offset({top: pointA.top + pointAcenterY, left: pointA.left + pointAcenterX});
  }
}
new drawLine('.a', '.b', '.line');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="question">
  <div id="old" class="left_side one_half svg left">
    <a href="#" data-number="1"><img class="a" src="assets/svg/Kerze.svg"></a>
    <a href="#" data-number="2"><img src="assets/svg/Telefon.svg"></a>
    <a href="#" data-number="3"><img src="assets/svg/Schreibmaschine.svg"></a>
    <a href="#" data-number="4"><img src="assets/svg/TV_old.svg"></a>
    <a href="#" data-number="5"><img src="assets/svg/Zeitstopper.svg"></a>
    <a href="#" data-number="6"><img src="assets/svg/Besen.svg"></a>
    <a href="#" data-number="7"><img src="assets/svg/Waschen.svg"></a>
  </div>
  <div class="left_side one_half svg right">
    <a href="#" data-letter="NS"><img src="assets/svg/Iwatch.svg"></a>
    <a href="#" data-letter="RT"><img src="assets/svg/Laptop.svg"></a>
    <a href="#" data-letter="TE"><img src="assets/svg/Staubsauger.svg"></a>
    <a href="#" data-letter="IN"><img src="assets/svg/Waschmaschine.svg"></a>
    <a href="#" data-letter="EI"><img src="assets/svg/TV_new.svg"></a>
    <a href="#" data-letter="AL"><img src="assets/svg/Gluehbirne.svg"></a>
    <a href="#" data-letter="BE"><img class="b" src="assets/svg/Iphone.svg"></a>
    <div class="line"></div>  
  </div>
</div>

I have successfully created a line between two images (from class a to class b), which is always calculated to form a right angle. However, I am struggling to implement the functionality as described above. Any suggestions? Thank you.

javascript jquery html css image

Answer 1

Answer №1

let setLeft = false, setRight = false;
$('.leftSide img').click(function(){
    $('.leftSide img').removeClass('a');
    $(this).addClass('a');
  setLeft = true;
  new drawLine('.a', '.b', '.line');
});
$('.rightSide img').click(function(){
    $('.rightSide img').removeClass('b');
    $(this).addClass('b');
  setRight = true;
  new drawLine('.a', '.b', '.line');
});

To track the clicks on images from left and right side, we can use flag variables. When an image from the right is clicked, set the right flag variable to be true, and do the same for the left.

Within the drawLine function, check if both flag variables are true before drawing a line between a and b. After drawing the line, reset the flag variables to false.

function lineDistance(x, y, x0, y0){
    return Math.sqrt((x -= x0) * x + (y -= y0) * y);
};

function drawLine(a, b, line) {

if(setLeft && setRight){
  setLeft = false;
    setRight = false;
    var pointA = $(a).offset();
    var pointB = $(b).offset();
    console.log(pointA);
    console.log(pointB);
    var pointAcenterX = $(a).width() / 2;
    var pointAcenterY = $(a).height() / 2;
    var pointBcenterX = $(b).width() / 2;
    var pointBcenterY = $(b).height() / 2;
    var angle = Math.atan2(pointB.top - pointA.top, pointB.left - pointA.left) * 180 / Math.PI;
    var distance = lineDistance(pointA.left, pointA.top, pointB.left, pointB.top);

   // Set Angle
    $(line).css('transform', 'rotate(' + angle + 'deg)');


    // Set Width
    $(line).css('width', distance + 'px');

    // Set Position
    $(line).css('position', 'absolute');
    if(pointB.left < pointA.left) {
      $(line).offset({top: pointA.top + pointAcenterY, left: pointB.left + pointBcenterX});
    } else {
      $(line).offset({top: pointA.top + pointAcenterY, left: pointA.left + pointAcenterX});
    }
  }
}
//new drawLine('.a', '.b', '.line');
let setLeft = false, setRight = false;
$('.leftSide img').click(function(){
$('.leftSide img').removeClass('a');
$(this).addClass('a');
  setLeft = true;
  new drawLine('.a', '.b', '.line');
});
$('.rightSide img').click(function(){
$('.rightSide img').removeClass('b');
$(this).addClass('b');
  setRight = true;
  new drawLine('.a', '.b', '.line');
});

.left{
  float:left;
}
.right{
  float:right;
}
.one_half{
  width:40%;
}
img{
  max-width:100%;
}
.line{
  background: red;
  height:1px;
}
.question{
  position: relative;
  overflow: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="question">
  <div id="old" class="left_side one_half svg left leftSide">
    <a href="#" data-number="1"><img src="https://www.w3schools.com/css/trolltunga.jpg"></a>
    <a href="#" data-number="2"><img src="https://www.w3schools.com/css/trolltunga.jpg"></a>
    <a href="#" data-number="3"><img src="https://www.w3schools.com/css/trolltunga.jpg"></a>
    <a href="#" data-number="4"><img src="https://www.w3schools.com/css/trolltunga.jpg"></a>
    <a href="#" data-number="5"><img src="https://www.w3schools.com/css/trolltunga.jpg"></a>
    <a href="#" data-number="6"><img src="https://www.w3schools.com/css/trolltunga.jpg"></a>
    <a href="#" data-number="7"><img src="https://www.w3schools.com/css/trolltunga.jpg"></a>
  </div>
  <div class="left_side one_half svg right rightSide">
    <a href="#" data-letter="NS"><img src="https://www.w3schools.com/css/trolltunga.jpg"></a>
    <a href="#" data-letter="RT"><img src="https://www.w3schools.com/css/trolltunga.jpg"></a>
    <a href="#" data-letter="TE"><img src="https://www.w3schools.com/css/trolltunga.jpg"></a>
    <a href="#" data-letter="IN"><img src="https://www.w3schools.com/css/trolltunga.jpg"></a>
    <a href="#" data-letter="EI"><img src="https://www.w3schools.com/css/trolltunga.jpg"></a>
    <a href="#" data-letter="AL"><img src="https://www.w3schools.com/css/trolltunga.jpg"></a>
    <a href="#" data-letter="BE"><img src="https://www.w3schools.com/css/trolltunga.jpg"></a>
    <div class="line"></div>  
  </div>
</div>

Answer 2

let setLeft = false, setRight = false;
$('.leftSide img').click(function(){
    $('.leftSide img').removeClass('a');
    $(this).addClass('a');
  setLeft = true;
  new drawLine('.a', '.b', '.line');
});
$('.rightSide img').click(function(){
    $('.rightSide img').removeClass('b');
    $(this).addClass('b');
  setRight = true;
  new drawLine('.a', '.b', '.line');
});

To track the clicks on images from left and right side, we can use flag variables. When an image from the right is clicked, set the right flag variable to be true, and do the same for the left.

Within the drawLine function, check if both flag variables are true before drawing a line between a and b. After drawing the line, reset the flag variables to false.

function lineDistance(x, y, x0, y0){
    return Math.sqrt((x -= x0) * x + (y -= y0) * y);
};

function drawLine(a, b, line) {

if(setLeft && setRight){
  setLeft = false;
    setRight = false;
    var pointA = $(a).offset();
    var pointB = $(b).offset();
    console.log(pointA);
    console.log(pointB);
    var pointAcenterX = $(a).width() / 2;
    var pointAcenterY = $(a).height() / 2;
    var pointBcenterX = $(b).width() / 2;
    var pointBcenterY = $(b).height() / 2;
    var angle = Math.atan2(pointB.top - pointA.top, pointB.left - pointA.left) * 180 / Math.PI;
    var distance = lineDistance(pointA.left, pointA.top, pointB.left, pointB.top);

   // Set Angle
    $(line).css('transform', 'rotate(' + angle + 'deg)');


    // Set Width
    $(line).css('width', distance + 'px');

    // Set Position
    $(line).css('position', 'absolute');
    if(pointB.left < pointA.left) {
      $(line).offset({top: pointA.top + pointAcenterY, left: pointB.left + pointBcenterX});
    } else {
      $(line).offset({top: pointA.top + pointAcenterY, left: pointA.left + pointAcenterX});
    }
  }
}
//new drawLine('.a', '.b', '.line');
let setLeft = false, setRight = false;
$('.leftSide img').click(function(){
$('.leftSide img').removeClass('a');
$(this).addClass('a');
  setLeft = true;
  new drawLine('.a', '.b', '.line');
});
$('.rightSide img').click(function(){
$('.rightSide img').removeClass('b');
$(this).addClass('b');
  setRight = true;
  new drawLine('.a', '.b', '.line');
});

.left{
  float:left;
}
.right{
  float:right;
}
.one_half{
  width:40%;
}
img{
  max-width:100%;
}
.line{
  background: red;
  height:1px;
}
.question{
  position: relative;
  overflow: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="question">
  <div id="old" class="left_side one_half svg left leftSide">
    <a href="#" data-number="1"><img src="https://www.w3schools.com/css/trolltunga.jpg"></a>
    <a href="#" data-number="2"><img src="https://www.w3schools.com/css/trolltunga.jpg"></a>
    <a href="#" data-number="3"><img src="https://www.w3schools.com/css/trolltunga.jpg"></a>
    <a href="#" data-number="4"><img src="https://www.w3schools.com/css/trolltunga.jpg"></a>
    <a href="#" data-number="5"><img src="https://www.w3schools.com/css/trolltunga.jpg"></a>
    <a href="#" data-number="6"><img src="https://www.w3schools.com/css/trolltunga.jpg"></a>
    <a href="#" data-number="7"><img src="https://www.w3schools.com/css/trolltunga.jpg"></a>
  </div>
  <div class="left_side one_half svg right rightSide">
    <a href="#" data-letter="NS"><img src="https://www.w3schools.com/css/trolltunga.jpg"></a>
    <a href="#" data-letter="RT"><img src="https://www.w3schools.com/css/trolltunga.jpg"></a>
    <a href="#" data-letter="TE"><img src="https://www.w3schools.com/css/trolltunga.jpg"></a>
    <a href="#" data-letter="IN"><img src="https://www.w3schools.com/css/trolltunga.jpg"></a>
    <a href="#" data-letter="EI"><img src="https://www.w3schools.com/css/trolltunga.jpg"></a>
    <a href="#" data-letter="AL"><img src="https://www.w3schools.com/css/trolltunga.jpg"></a>
    <a href="#" data-letter="BE"><img src="https://www.w3schools.com/css/trolltunga.jpg"></a>
    <div class="line"></div>  
  </div>
</div>

Linking pictures with strokes

Answer №1

Similar questions

Achieve an overlapping effect with grid items

What is the process of converting an image taken with the 'react-camera-pro' into a byte array?

Finding the optimal image prediction from HTML using Google JSoup - A guide

Transforming JavaScript date into JSON date structure

Adjusting the Style of a Parent Element Depending on the Content of its Child Element

Struggling with Creating Custom Validation Methods in JQuery

Customizing window.alert to accept more than one argument

Challenges in Ensuring Proper Alignment of Connection Line Between Boxes on Left and Right Sides within a React Component

experiencing a never-ending loop while attempting to load images through ajax requests

Coloring the entire table as a whole instead of individual cells

Using Google App Script to transfer specific columns of a row to a different tab based on the value in a particular column

Maintaining data after page reload in Angular

What is the process for playing an audio file on a mobile device?

Arrange DIV elements sequentially with HTML, JQuery, and CSS

The information in JSON format has been received but it is empty

retrieving the 'sibling' element from an array

Upon attempting to open Google Maps for the second time, an error message pops up indicating that the Google Maps JavaScript API has been included multiple times on this page

What is the best method for transferring images to a node.js server using Axios?

Viewing e-commerce thumbnail galleries is made easy with this unique

Warning message for repetitive keys in template loop