Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

Move character on map on clicked position

Tags:

html

jquery

dictionary

css

margin

I've got a map which is can be moved around by changing margin-top and margin-left logic. When I click on arrows, jQuery changes the left/top margins and the whole map moves, so it looks like my character is moving.

Now I want to be able to move to anywhere I click on specified map position.

$("#up").on("click", function(e)
{
  var offset = parseInt($("#map").css("margin-top"));
  offset+=16;
  $("#map").css("margin-top", offset + "px");
});

$("#down").on("click", function(e)
{
  var offset = parseInt($("#map").css("margin-top"));
  offset-=16;
  $("#map").css("margin-top", offset + "px");
});

$("#left").on("click", function(e)
{
  var offset = parseInt($("#map").css("margin-left"));
  offset+=16;
  $("#map").css("margin-left", offset + "px");
});

$("#right").on("click", function(e)
{
  var offset = parseInt($("#map").css("margin-left"));
  offset-=16;
  $("#map").css("margin-left", offset + "px");
});
.row {
    justify-content: center;
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
}

.texture img {
    width: 100%;
    height: auto;
    display: block;
}

.texture:hover {
    position: relative;
    filter: grayscale(1);
}

button
{
  font-size: 20pt;width: 50px;height: 50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="float:right">
<table>
    <tr><td></td><td><button id="up">&uarr;</button><br /></td><td></td></tr>
    <tr><td><button id="left">&larr;</button><br /></td><td></td><td><button id="right">&rarr;</button><br /></td></tr>
    <tr><td></td><td><button id="down">&darr;</button><br /></td><td></td></tr>
</table>
</div>

<div id="viewport" style="width:300px;height:300px;overflow:hidden;position:relative;">
<img src="https://i.ibb.co/8PZ6Dp9/hero-down.png" alt="hero" style="position:absolute;left:140px;top:140px;">
<div id="map" style="width:590px; height:433px;">

<div class="row">
  <div class="texture"><img src="https://i.ibb.co/ZVsfZgZ/untitled3.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/4.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/1.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/ZVsfZgZ/untitled3.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
</div>
<div class="row">
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/4.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/ZVsfZgZ/untitled3.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/1.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
</div>

<div class="row">
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/4.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/1.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
</div>

<div class="row">
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/4.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/1.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
</div>

<div class="row">
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/4.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/1.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
</div>

<div class="row">
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/4.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/1.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
</div>

<div class="row">
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/4.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/1.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
</div>

<div class="row">
  <div class="texture"><img src="https://i.ibb.co/ZVsfZgZ/untitled3.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/4.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/1.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/ZVsfZgZ/untitled3.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
</div>
<div class="row">
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/4.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/ZVsfZgZ/untitled3.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/1.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
</div>

<div class="row">
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/4.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/1.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
</div>

<div class="row">
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/4.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/1.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
</div>

<div class="row">
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/4.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/1.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
</div>

<div class="row">
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/4.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/1.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
</div>

</div>
</div>
like image 904
relos100 Avatar asked Dec 13 '25 13:12

relos100

1 Answers

The first part is to work out which cell you clicked on and then to work out the x and y coordinates. Once that is deduced we work out the differential from the starting point (since we start at 4, 4). We then animate to the desired cell.

From here you could animate your character when he moves. You could also work out the distance to travel and to change the speed of movement. At present the speed is always 1 second to get to the destination.

$("#up").on("click", function(e)
{
  var offset = parseInt($("#map").css("margin-top"));
  offset+=16;
  $("#map").css("margin-top", offset + "px");
});

$("#down").on("click", function(e)
{
  var offset = parseInt($("#map").css("margin-top"));
  offset-=16;
  $("#map").css("margin-top", offset + "px");
});

$("#left").on("click", function(e)
{
  var offset = parseInt($("#map").css("margin-left"));
  offset+=16;
  $("#map").css("margin-left", offset + "px");
});

$("#right").on("click", function(e)
{
  var offset = parseInt($("#map").css("margin-left"));
  offset-=16;
  $("#map").css("margin-left", offset + "px");
});

$("#map div img").on("click", function(e)
{
  var $div = $(this).closest("div");
  var x = $div.index();
  
  var $row = $div.closest("div.row");
  var y = $row.index();
  
  var dx = (4- x) * 32, dy = (4- y) * 32
  
  $( "#map" ).animate({
    "margin-left" : dx + "px",
    "margin-top": dy + "px"
  }, 1000, function() 
  {

  });
});
.row {
    justify-content: center;
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
}

.texture img {
    width: 100%;
    height: auto;
    display: block;
}

.texture:hover {
    position: relative;
    filter: grayscale(1);
}

button
{
  font-size: 20pt;width: 50px;height: 50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="float:right">
<table>
    <tr><td></td><td><button id="up">&uarr;</button><br /></td><td></td></tr>
    <tr><td><button id="left">&larr;</button><br /></td><td></td><td><button id="right">&rarr;</button><br /></td></tr>
    <tr><td></td><td><button id="down">&darr;</button><br /></td><td></td></tr>
</table>
</div>

<div id="viewport" style="width:300px;height:300px;overflow:hidden;position:relative;">
<img src="https://i.ibb.co/8PZ6Dp9/hero-down.png" alt="hero" style="position:absolute;left:128px;top:128px;">
<div id="map" style="width:590px; height:433px;">

<div class="row">
  <div class="texture"><img src="https://i.ibb.co/ZVsfZgZ/untitled3.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/4.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/1.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/ZVsfZgZ/untitled3.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
</div>
<div class="row">
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/4.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/ZVsfZgZ/untitled3.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/1.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
</div>

<div class="row">
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/4.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/1.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
</div>

<div class="row">
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/4.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/1.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
</div>

<div class="row">
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/4.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/1.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
</div>

<div class="row">
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/4.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/1.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
</div>

<div class="row">
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/4.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/1.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
</div>

<div class="row">
  <div class="texture"><img src="https://i.ibb.co/ZVsfZgZ/untitled3.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/4.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/1.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/ZVsfZgZ/untitled3.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
</div>
<div class="row">
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/4.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/ZVsfZgZ/untitled3.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/1.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
</div>

<div class="row">
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/4.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/1.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
</div>

<div class="row">
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/4.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/1.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
</div>

<div class="row">
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/4.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/1.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
</div>

<div class="row">
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/4.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/1.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
</div>

</div>
</div>
like image 161
Lee Taylor Avatar answered Dec 16 '25 05:12

Lee Taylor
Sign in to Comment

Related questions

HTML change opacity onload using this will not work
CSS collapse/expand div
how to share images on instagram using jquery
unable to select entire row if rowspan is applied in bootstrap table
accessibility reading out modal message in Jaws
How to fix the jQuery 1.8 “unsupported pseudo” error?
inArray jQuery from php array, finding the item index
Why is this throwing up an error?
Dynamically Created Html table rendering slow for huge records
parseJSON error: unexpected character at line 1 column 2 of the JSON data
Restrict Google Places API to specific country
How do I use .queue() to properly chain custom callback functions?
Google map Info box doesn't listen the click event

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!