I have lots of images in my page and I am looking for a way to draw a line that will connect one image to the other ( it doesn't have to be an arrow, just a normal line. ).For example, let us consider ($) as an image:
$
$
Now how can I connect those 2 images ($) with a line?
Thanks!
Since you seem to be asking about basic JavaScript, HTML, and CSS, here's a simple method using only those. It's nice to understand the math and theory behind doing these kinds of graphical calculations instead of entirely relying on libraries.
Use a HTML div as a line by calculating the distance and angle between two images.
// Get the position of the first image
var imgOnePosition = document.getElementById("one").getBoundingClientRect();
// Get the position of the second image
var imgTwoPosition = document.getElementById("two").getBoundingClientRect();
// Calculate the angle between the two images' positions.
// Math.atan2() returns a value in radians so convert it to degrees as well
var angle = Math.atan2(imgOnePosition.top - imgTwoPosition.top, imgOnePosition.left - imgTwoPosition.left) * (180 / Math.PI);
// Calculate the distance, hopefully you remember this from basic algebra :)
var distance = Math.sqrt(Math.pow(imgOnePosition.top - imgTwoPosition.top, 2) + Math.pow(imgOnePosition.left - imgTwoPosition.left, 2));
// Create a new DIV to represent our line
var line = document.createElement("div");
// Now we style it
line.style.position = "absolute"; // so that we can change left and top
line.style.width = distance + "px";
line.style.height = "2px";
line.style.left = "50%"; // Center the element in its parent
line.style.top = "50%"; // Center the element in its parent
line.style.background = "#000";
line.style.transformOrigin = "0% 50%"; // Rotate around one edge instead of the middle
line.style.transform = "rotate(" + (angle) + "deg)";
// Add the line to the SECOND image's parent element.
// It's the 2nd image instead of 1st because of the order we did the math in calculating the angle
document.getElementById("two").appendChild(line);body, img {
margin: 0;
padding: 0;
display: block;
}
#container {
position: relative;
background: #ddd;
width: 320px;
height: 240px;
}
.img-container {
position: absolute;
}<div id="container">
<div id="one" class="img-container" style="left: 50px; top: 100px;" >
<img src="http://imgur.com/8B1rYNY.png" />
</div>
<div id="two" class="img-container" style="left: 150px; top: 190px;" >
<img src="http://imgur.com/8w6LAV6.png" />
</div>
</div>If you want the line to appear behind the images instead of in front, you could modify their z-index values so they're ordered properly.
Edit: The above works if the images are the exact same size. If they are different sizes, calculate the center point of the images and use that instead of just the top left corner of the getBoundingClientRect().
// Get the position of the first image
var imgOneRect = document.getElementById("one").getBoundingClientRect();
var imgOnePosition = {
left: (imgOneRect.left + imgOneRect.right) / 2,
top: (imgOneRect.top + imgOneRect.bottom) / 2
}
// Get the position of the second image
var imgTwoRect = document.getElementById("two").getBoundingClientRect();
var imgTwoPosition = {
left: (imgTwoRect.left + imgTwoRect.right) / 2,
top: (imgTwoRect.top + imgTwoRect.bottom) / 2
}
