I have created an image map with coordinates and dimensions specified (apologies for the rough drawing...)
https://i.sstatic.net/CxQAk.png
The numbers represent x-coordinate, y-coordinate, width, and height.
For instance, 5, 5, 25, 25 indicates that the image is positioned at (5, 5) with a width of 25px and height of 25px.
(the size of the last image is incorrect. The correct size should be 100, 5, 5, 25.)
Now, I aim to create
https://i.sstatic.net/es9RE.png
using the aforementioned image map with a width of 100px and height of 25px.
Currently, I am using the following code for the image map:
#aDiv {
width: 25px; height 25px;
background-image:url('path');
background-repeat:no-repeat;
background-position:-5px -5px;
}
with just one tag
<div></div>
for the background.
However, I am unsure how to create something similar to the second image using the first image map. How can I achieve this?
The code above shows my current progress. At this point, I am completely lost. My latest attempt was:
#one {
display:inline-block;
width:25px; height:25px;
background-image:url('path');
background-repeat:no-repeat;
background-position:-5px -5px;
}
#two {
display:inline-block;
width:25px; height:25px;
background-image:url('path');
background-repeat:no-repeat;
background-position:-100px -5px;
}
#three {
display:inline-block;
width:5px; height:25px;
background-image:url('path');
background-repeat:no-repeat;
background-position:-50px -5px;
}
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
However, this method only adds up to 75 pixels in total width. I need to replicate #two, essentially recreating the third section of the image map.