이미지를 다른 위치로 이동

작은 이미지 (축소 이미지)를 이동하려했지만 이동하지 않습니다. 그냥 왼쪽에 고정되어 있습니다. div id를 지정하고 여백을 설정하려고 시도했지만 작동하지 않습니다. 이 세 가지 img의 태그의 경우이미지를 다른 위치로 이동

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> 
    <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>

출처

2013-05-14 Elvain

이 jsfiddle 예를 제공? – hjpotter92

어떻게 옮기려고 했습니까? – Aioros

@Aioros는 div에 이미지를 넣은 다음 ID를주었습니다. CSS 스타일로 여백을 설정하려고 시도했습니다. – Elvain

글쎄, 당신이있어 자바 스크립트

: 여기

는 코드입니다 말하는 대략, 당신은 그들의 스타일을 설정해야합니다. 같은 뭔가이 같은

<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');" />

및

.smallimg { 
    cursor: pointer; 
    float: right; 
    /* or whatever position/top/left values you need */ 
}

또는 당신이 그 (것)들을 중심으로 원한다면, 당신이 할 수있는 일 : 내 의견에 따라

<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>

출처

2013-05-14 14:01:14 Aioros

이렇게해도 문제가 해결되지는 않습니다. 그는 페이지 중심에 그 중심을두기를 원합니다. 여기서 달성하고자하는 것은 디스플레이 (인라인, 인라인 테이블 등)를 사용하여 수행 할 수 있습니다. 플로트가 필요 없습니다. – melancia

감사합니다. 다른 간단한 가능성으로 답을 편집했습니다. 도움이되는지 봅시다. – Aioros

해결책. 아마 당신은이 옵션을 통해 갈 수 있습니다

HTML

<div class="container"> 
    <img src="http://www.bit-101.com/blog/wp-content/uploads/2009/05/ball.png" alt="" /> 
    <img src="http://ecx.images-amazon.com/images/I/41P44yRoAPL._SL75_SS50_.jpg" alt="" /> 
    <img src="http://ecx.images-amazon.com/images/I/41B9Qbj2CBL._SL75_SS50_.jpg" alt="" /> 
</div>

CSS

.container 
{ 
    height: 50px; /* img height */ 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    margin-top: -25px; /* half of the img height */ 
    margin-left: -75px; /* half of the img width's total */ 
    overflow: hidden; 
} 

.container > img 
{ 
    display: inline; 
}

http://jsfiddle.net/qFmhf/

출처

2013-05-14 14:25:52 melancia

이미지를 다른 위치로 이동

답변

관련 문제