I've been having trouble moving the small images (thumbnails) on my page. They seem to be stuck in place on the left and I've tried adjusting their margins using a div id, but it hasn't had any effect.
Below are the relevant code snippets:
JavaScript
function showImage(imgName) {
document.getElementById('largeImg').src = imgName;
showLargeImagePanel();
unselectAll();
}
function showLargeImagePanel() {
document.getElementById('largeImgPanel').style.visibility = 'visible';
}
function unselectAll() {
if(document.selection) document.selection.empty();
if(window.getSelection) window.getSelection().removeAllRanges();
}
function hideMe(obj) {
obj.style.visibility = 'hidden';
}
CSS
#largeImgPanel {
text-align: center;
visibility: hidden;
position: fixed;
z-index: 100;
top: 0; left: 0; width: 100%; height: 100%;
background-color: rgba(100,100,100, 0.5);
}
Html body
<body>
<img src="images/small1.png" style="cursor:pointer" onclick="showImage('images/large1.jpg');" />
<img src="images/small2.jpg" style="cursor:pointer" onclick="showImage('images/large2.jpg');" />
<img src="3_small.jpeg" style="cursor:pointer" onclick="showImage('3_large.jpeg');" />
<div id="largeImgPanel" onclick="hideMe(this);">
<img id="largeImg" margin: 0; padding: 0;" />
</div>
</body>
</html>