JavaScript:
<style>
.mapcontent {
position: relative;
z-index: 10;
width: 400px;
height: 400px;
overflow:hidden;
background-image: url(stars.jpg);
}
#pointer {
position: absolute;
top: 0;
left: 0;
width: 30px;
height: 30px;
background-image: url(sto-pointer-icon-tx.png);
z-index: 50;
animation: move 3s ease;
}
@keyframes move {
50% {
top: 400px;
left: 400px;
}
}
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col" id="wrap">
<table>
<thead>
<tr>
<th width="100">System List</th>
<th width="25">X</th>
<th width="25">Y</th>
</tr>
</thead>
<tbody>
<tr>
<td >
<a href='#' id='systemname' class='systemname'>acamar</a>
</td>
<td id='ix'>15</td><td id='iy'>80</td></tr>
<tr>
<td >
<a href='#' id='systemname' class='systemname'>bajor</a>
</td>
<td id='ix'>60</td><td id='iy'>75</td></tr>
<tr>
<td >
<a href='#' id='systemname' class='systemname'>sol</a>
</td>
<td id='ix'>25</td><td id='iy'>25</td></tr>
<tr>
<td >
<a href='#' id='systemname' class='systemname'>vulcan</a>
</td>
<td id='ix'>50</td><td id='iy'>40</td></tr>
</tbody>
<tfoot>
<tr>
<th colspan="3">--</th>
</tr>
</tfoot>
</table>
</div>
<div class="col mapcontent">
<div id="pointer"></div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="../js/jquery-3.6.0.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="../js/bootstrap.js"></script>
<script language="javascript">
$(document).ready(function() {
$("#systemname").on('click', function(event) {
var xx = document.getElementById("ix").innerHTML;
var yy = document.getElementById("iy").innerHTML;
document.getElementById('pointer').style.left = xx+'px';
document.getElementById('pointer').style.top = yy+'px';
event.preventDefault();
});
});
</script>
</body>
</html>