If i click the image the moon and next image star draw line b/w them.and next i click orbitalradius them draw start to orbitalradius line..
Draw line between div by click on div...
If i click the image the moon and next image star draw line b/w them.and next i click orbitalradius them draw start to orbitalradius line..
Ask by Milind narkhede
Updated 15 May 2026
I am Waiting for your reply please solve the problem....
<head>
<title></title>
<style>
img {
padding: 1px;
margin: 2px;
float: left;
background-color: #99BC99
}
img.selected {
padding: 2px;
margin: 4px;
background-color: #E13300
}
</style>
<script type="text/javascript">
$(document).ready(function () {
$('img').click(function () {
var $elem1 = $(this).parent();
var $elem2 = $('span.last');
$(this).toggleClass('selected');
if ($elem2.length > 0) {
connect($elem1[0], $elem2[0], "#0F0", 5);
} else { $elem1.addClass('last'); }
$('span').removeClass('last');
$elem1.addClass('last');
});
});
function connect(div1, div2, color, thickness) {
var off1 = getOffset(div1);
var off2 = getOffset(div2);
// bottom right
var x1 = off1.left + off1.width;
var y1 = off1.top + off1.height;
// top right
var x2 = off2.left + off2.width;
var y2 = off2.top;
// distance
var length = Math.sqrt(((x2 - x1) * (x2 - x1)) + ((y2 - y1) * (y2 - y1)));
// center
var cx = ((x1 + x2) / 2) - (length / 2);
var cy = ((y1 + y2) / 2) - (thickness / 2);
// angle
var angle = Math.atan2((y1 - y2), (x1 - x2)) * (180 / Math.PI);
// make hr
var htmlLine = "<div style='padding:0px; margin:0px; height:" + thickness + "px; background-color:" + color + "; line-height:1px; position:absolute; left:" + cx + "px; top:" + cy + "px; width:" + length + "px; -moz-transform:rotate(" + angle + "deg); -webkit-transform:rotate(" + angle + "deg); -o-transform:rotate(" + angle + "deg); -ms-transform:rotate(" + angle + "deg); transform:rotate(" + angle + "deg);' />";
//
//document.body.innerHTML += htmlLine;
$('body').append($(htmlLine));
}
function getOffset(el) {
var _x = 0;
var _y = 0;
var _w = el.offsetWidth | 0;
var _h = el.offsetHeight | 0;
while (el && !isNaN(el.offsetLeft) && !isNaN(el.offsetTop)) {
_x += el.offsetLeft - el.scrollLeft;
_y += el.offsetTop - el.scrollTop;
el = el.offsetParent;
}
return { top: _y, left: _x, width: _w, height: _h };
}
window.testIt = function () {
var div1 = document.getElementById('div1')
var div2 = document.getElementById('div2')
connect(div1, div2, "#0F0", 5);
}
</script>
</head>
<body>
<span style="position: absolute; left: 933px; top: 211px;">
<a id="div1" href=""> <img src="../Linedraw/HTML/images/the_moon_bg.png" alt="" width="35" height="35" /></a></span>
<span style="position: absolute; left: 304px; top: 190px;">
<a id="div2" href=""> <img src="../Linedraw/HTML/images/the_moon_bg.png" alt="" width="35" height="35" /></a></span>
<span style="position: absolute; left: 756px; top: 264px;">
<img src="../Linedraw/HTML/images/the_moon_bg.png" alt="" width="35" height="35" id="div3" /></span>
<span style="position: absolute; left: 365px; top: 395px;">
<img src="~/Content/untitled.png" alt="" width="35" height="35" id="div4" /></span>
<span style="position: absolute; left: 129px; top: 302px;">
<img src="~/Content/untitled.png" alt="" width="35" height="35" id="div5" /></span>
<span style="position: absolute; left: 504px; top: 261px;">
<img src="~/Content/untitled.png" alt="" width="35" height="35" id="div6" /></span>
<span style="position: absolute; left: 650px; top: 393px;">
<img src="~/Content/untitled.png" alt="" width="35" height="35" id="div7" /></span>
<span style="position: absolute; left: 283px; top: 26px;">
<img src="~/Content/untitled.png" alt="" width="35" height="35" id="div8" /></span>
<span style="position: absolute; left: 593px; top: 35px;">
<img src="~/Content/untitled.png" alt="" width="35" height="35" id="div9" /></span>
<span style="position: absolute; left: 784px; top: 42px;">
<img src="~/Content/untitled.png" alt="" width="35" height="35" id="div10" /></span>
</body>
</html>
i have checked on http://jsfiddle.net/tg9vawgs/
please reply me......
Hi Milind you can try this code
CSS:
HTML:
Javascript:
Output: