Here is the code I am working with:
<script type = "text/javascript">
function pic1()
{
document.getElementById("img").src = "../images/images/1.png";
}
function pic2()
{
document.getElementById("img").src = "../images/images/2.png";
}
</script>
This is my html layout:
<span class="background" style="width: 950px; height: 642px; top: 0px; left: 0px">
</span>
<span class="car">
<img src = "../images/images/1.png" id = "img" />
</span>
<span class="car2">
<img src = "../images/thumbs/3.png"<input type="button" value="show"onclick="pic2()" />
</span>
I am trying to position the images and thumbs using CSS. The main image should be in the middle of the page, while the thumbnail should be at the bottom.
.car
{
position: absolute;
cursor: pointer;
display: block;
overflow:hidden;
margin:0;
padding: 0;
width: 638px;
height: 274px;
top: 200px;
left: 150px;
}
.car-colour
{
position: absolute;
cursor: pointer;
display: block;
overflow:hidden;
margin:0;
padding: 0;
width: 70px;
height: 70px;
top: 500px;
left: 80px;
}
Issue Resolved!
.car
{
position: absolute;
cursor: pointer;
display: block;
overflow:hidden;
margin:0;
padding: 0;
}
<span class="car" style="width: 638px; height: 274px; top: 200px; left: 150px;">
<img src = "../images/images/1.png" id = "img" />
</span>