특정 거리에서 자바 스크립트를 사용하여 이미지 만들기

function on_click(e) 
{ 
    if(!e) e = window.event; 
    dragok = false; 
    document.onmousemove = null; 
    var x = e.target||e.srcElement; 
    if(dx > 200) // dx is the numbers of pixels from leftside of mouse pointer 
    { 
     // document.write(dx); this is working it prints dx value but unable to create an image   
     var img = IEWIN ? new Image() : document.createElement('img'); 
     img.src="cool.jpg"; 
     document.getElementById(x.id).appendChild(img); 
    } 
}

이 스 니펫은 stackoverflow에서 발견되었지만 시도했을 때는 작동하지 않았습니다. 여기에있다 What is the best JavaScript code to create an img element 특정 거리에서 자바 스크립트를 사용하여 이미지 만들기

기능은 on_click 함수가 호출 될 때 이미지를 만드는 것입니다 (onclick 이벤트에 대해 on_click 함수가 호출됩니다). dx는 왼쪽에서 측정 한 픽셀입니다. 따라서 마우스 포인터가 200 픽셀보다 크고 마우스를 클릭하면 dx가 206이면 206 픽셀의 거리로 이미지를 만들어야한다는 의미의 이미지를 만들어야합니다. 그러나 만들 수 없습니다. javascript가 포함 된 이미지 요소

자바 스크립트 코드에서 변경해야 할 사항은 무엇입니까?

출처

2011-09-18 niko

당신이 필요로하는 모든이 모든 브라우저를위한 것입니다

var img = new Image(); 
img.src = "cool.jpg"; 
img.className = "myClass"; 
img.id = "mainImage"; 
x.appendChild(img);

이미 DOM 요소가있는 경우,이 ID를받을 이유가 없습니다 다음 document.getElementById(x.id)을한다. 그냥 x을 직접 사용하십시오.

, 당신은 (당신이 클래스 또는 ID를 참조하고 있는지에 따라)이 같은 규칙을 만들 것이 이미지를 참조 CSS 규칙을 사용하려면

.myClass {border: 1px solid #F00;} 
#mainImage {padding: 14px;}

출처

2011-09-18 06:33:42 jfriend00

절대적으로 작업을! 그래서 현대적인 브라우저는 document.createelement를 지원하지 않습니까? 너비와 높이 속성을 만드는 법을 말해 줄 수 있니? 나는 그것에 img.id를 설정하고 css 시트에 속성을 설정할 수 있습니까? 하지만 우리는 단지 부모 노드를 언급해야할까요? – niko

아니요 jfriend 자바 스크립트로 만든 img 태그에 img.id 또는 img.class를 만들고 CSS 시트를 사용하여 속성을 참조하려고합니다. – niko

CSS 규칙을 참조 할 수있는 클래스 이름과 ID를 추가하는 방법을 보여주기 위해 몇 줄을 추가했습니다. Image 객체는 DOM 요소입니다. 나는 당신이'document.createElement()'를 대신 사용할 수 있다고 생각하지만 왜 그럴까? 'new Image()'문법이 내장되어 있습니다. – jfriend00

특정 거리에서 자바 스크립트를 사용하여 이미지 만들기

답변

관련 문제