I am facing an issue with positioning images within a div to a span. The problem arises as the images are overlapping each other and I am uncertain about how to properly place each image when it is added.
Below is the code snippet:
The CSS:
<style type="text/css">
body{background-image:url('image/wood.jpg');}
h1, h3, h4, h5, h6, p{text-align:center; font-family:helvetica; font-weight:900;}
h3, h4, h5 {color:red;}
h1, h6, p{color:white;}
img{height:120px;}
span{display:inline-block; margin-left: 25px; height:250px;}
div.inv{background-image:url('image/shelf.jpg'); background-position:fixed;
background-repeat:none;}
span#la, span#me, span#sm{margin-left:auto; margin-right:auto; width:800px;}
div{background-image:url('image/crate.jpg'); margin-left:25px;
margin-right:25px;}
The Javascript:
var temp = null;
var largeArray = new Array(6);
function isTemp()
{
if(temp == null)
{
alert("Please pick an item to place in the container");
}
}
function fillLarge()
{
isTemp();
if(largeArray[0] != undefined &&largeArray[1] != undefined &&largeArray[2] != undefined && largeArray[3] != undefined &&largeArray[4] != undefined &&largeArray[5] != undefined)
{
alert('This crate is full');
}
else
{
for (var i=0; i<6; i++)
{
if (largeArray[i] == undefined)
{
largeArray[i] = "<img src='image/"+temp+".jpg'/>";
document.getElementById("la").innerHTML = largeArray[i];
break;
}
}
document.getElementById(temp).style.display="none";
temp = null;
}
}
The HTML:
<div>
<h3> LARGE CONTAINER </h3>
<span id="la" onclick="fillLarge();">
</span> </div>
<span id = "gold" onclick = "temp = this.id;">
<img src="image/gold.jpg"/>
<p> Gold that you didn't farm </p>
</span>
<span id = "Moarg" onclick = "temp = this.id;">
<img src="image/Moarg.jpg" />
<p> Mo'arg Slave for <br /> your engineering needs </p>
</span>
<span id = "sweetroll" onclick = "temp = this.id;">
<img src="image/sweetroll.jpg" />
<p> Sweetroll stolen from a citizen </p>
</span>
<span id = "uranium" onclick = "temp = this.id;">
<img src="image/uranium.jpg" />
<p> Uranium Ore </p>
</span>
I have basic knowledge of javascript but haven't used jQuery or any advanced techniques before.