html - Moving the images to a different position -
i've been trying move small images (thumbnails) won't move. stays fixed left. i've tried giving div id , set margins doesn't work.
here codes:
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>
well, if it's 3 img
s tags you're talking about, have set style. like:
<img src="images/small1.png" class="smallimg" onclick="showimage('images/large1.jpg');" /> <img src="images/small2.jpg" class="smallimg" onclick="showimage('images/large2.jpg');" /> <img src="3_small.jpeg" class="smallimg" onclick="showimage('3_large.jpeg');" />
and
.smallimg { cursor: pointer; float: right; /* or whatever position/top/left values need */ }
or if want them centered, this:
<div style="text-align: center;"> <img src="images/small1.png" class="smallimg" onclick="showimage('images/large1.jpg');" /> <img src="images/small2.jpg" class="smallimg" onclick="showimage('images/large2.jpg');" /> <img src="3_small.jpeg" class="smallimg" onclick="showimage('3_large.jpeg');" /> </div>
Comments
Post a Comment