mouseclick 위치에 이미지 삽입

사용자가 지정된 요소 (다른 이미지)를 클릭하고 해당 이미지 앞에 앉을 때마다 이미지를 삽입해야합니다. 이 자바 스크립트에서 할 수 있습니까? 그렇지 않다면, 무엇을?mouseclick 위치에 이미지 삽입

감사

2010-07-27 IceDragon

당신은 너무 당신의 HTML/구조를 게시해야하지만, 이런 식으로 뭔가에 대해 갈 수 있습니다 : 당신이 외부 라이브러리를 사용하지 않는 설정하지 않는 한

var el = document.getElementById('image_id'); 
var img = document.getElementById('image_id2'); 
var container = document.getElementById('container_id'); 

el.onclick = function(){ 
    container.appendChild(img); 
};

출처

2010-07-27 12:33:05 Sarfraz

, 나는 좀 걸릴 것 jQuery,이 일을 훨씬 쉽게 할 수 있습니다.

출처

2010-07-27 12:34:41 second

확실히 기본 흐름은 onclick 이벤트에 이벤트 리스너를 추가하는 것입니다. 이 이벤트 리스너는 이미지를 일부 컨테이너 div에 추가합니다.

핵심은 이미지의 CSS입니다. 이 절대적으로 이미지에 위치하는지 확인하고 증가하는 Z- 색인을 사용하는 것이 좋습니다. onclick 이벤트에서 위치 값을 캡처 할 수 있습니다 (모든 다른 값에 대해서는 http://www.quirksmode.org/js/events_properties.html#position 참조). 자바 스크립트에서 이미지를 삽입 할 때 이러한 CSS 값을 설정합니다.

출처

2010-07-27 12:38:57

가능해야합니다. 나는 개인적으로 아주 쉽게이 일을하게 JQuery와 사용 http://jquery.com

이 예제는 당신에게 당신이 달성 할 방법에 대한 아이디어를 제공해야합니다 : 사용자가 지정한 IMG의 SRC 위치에서 이미지를 가지고 있는지 확인

<html> 
    <head> 
     <title>My Page></title> 
     <style type="text/css"> 
      .overlay { 
       position: absolute; 
       z-index: 500; 
      } 
     </style> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
     <script type="text/javascript"> 
      $("#clickable-image").click(function() { 
       var position = $(this).offset(); 
       $("#overlay-image").offset(position).show(); 
      }); 
     </script> 
    </head> 
    <body> 
     <img id="clickable-image" src="path/to/image" /> 

     <div id="overlay-image" class="overlay" style="display: none;"> 
      <img src="path/to/overlay/image" /> 
     </div> 
    </body> 
</html>

출처

2010-07-27 12:47:34

이미지를 삽입하지 않는 것 같습니다. :/어떤 아이디어? 감사 – IceDragon

을 ...

출처

2017-01-27 00:20:31 Rick

mouseclick 위치에 이미지 삽입

답변

관련 문제