Создать изображение с помощью JavaScript на определенном расстоянии

Question

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, но он не работал, когда я попробовал. Вот он Какой лучший код JavaScript для создания элемента img

Целью является создание изображения при вызове функции on_click (функция on_click вызывается для события onclick). dx - это пиксели, измеренные с левой стороны. Таким образом, если указатель мыши больше 200 пикселей и если щелкнуть мышью, он должен создать изображение в этом месте, я имею в виду, если dx равен 206, тогда изображение должно быть создано с расстоянием 206 пикселей. Но я не могу создать элемент изображения с javascript

Какие изменения я должен сделать в коде JavaScript?

Answer 1

Все, что вам нужно, это для всех браузеров:

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

Если у вас уже есть элемент DOM, нет причин получать идентификатор, а затем делать document.getElementById(x.id). Просто используйте x напрямую.

Чтобы использовать правила CSS, которые ссылаются на это изображение, вы должны создать такие правила (в зависимости от того, ссылаетесь ли вы на класс или идентификатор):

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