在HTML中定位图像（使用创建图像的按钮） [英] Positioning Images in HTML (Using a button creating images)

问题描述

 < div class =divClassName> 
< button onClick =functionName1（）;）;'>在此输入文字< / button> 
< script> 
函数functionName1（）{
 var src =name.jpg; 
 show_image（name.jpg，200,200，absolute，1，< alt>）; 
 
 
 
函数show_image（src，width，height，position，zIndex，alt）{
 var img = document.createElement（img）; 
 img.src = src; 
 img.width = width; 
 img.height =高度
 img.position = position; 
 img.style.zIndex = zIndex; 
 img.alt = alt; 
 
 document.body.appendChild（img）; 
} 
< / script> 
< / div> 
 <！ - 如果需要，请使用divClassName，functionName1和name.jpg的实际名称。 - > 
  

这会在按钮单击时显示图像，但会显示在屏幕的左上角，而不是我想要它的地方。我一直在尝试

  function show_image（src，width，height，position，left，top，zIndex，alt）{
 var img = document.createElement（img）; 
 img.src = src; 
 img.width = width; 
 img.height =高度
 img.position = position; 
 img.left = left; 
 img.top = top; 
 img.style.zIndex = zIndex; 
 img.alt = alt; 
  

...但它不起作用。任何修复/答案？

编辑：问题回答。使用：

  img.style.position = position; 
 img.style.left = left; 
 img.style.top = top; 
  

解决方案

>

如果您指定 position：absolute ，那么您必须给它们的 left ， top 或 bottom ， right ！

所以：

你必须传递额外的参数给你的函数，你想显示你的 img ：
$ b

  function show_image（src，width ，height，position，left，top，zIndex，alt）{// left，top as example 
 var img = document.createElement（img）; 
 img.src = src; 
 img.style.width = width; 
 img.style.height =高度
 img.style.position =位置; 
 img.style.left = left +'px'; 
 img.style.top = top +'px'; 
 img.style.zIndex = zIndex; 
 img.alt = alt; 
 
 document.body.appendChild（img）; 
} 
  

或者将样式赋予 img 是：

  img.attributes =style = left：+ left +px; top： + top +px; ...等等......; 
  

I've been using this code:

<div class="divClassName">
<button onClick="functionName1();");'>Enter Text Here</button>
<script>
    function functionName1() {
        var src = "name.jpg";
        show_image("name.jpg", 200, 200, "absolute", 1, "<alt>");
    }


    function show_image(src, width, height, position, zIndex, alt) {
        var img = document.createElement("img");
        img.src = src;
        img.width = width;
        img.height = height
        img.position = position;
        img.style.zIndex = zIndex;
        img.alt = alt;

        document.body.appendChild(img);
    }
</script>
</div>
<!-- Use actual names for divClassName, functionName1, and name.jpg if you want to. -->

This makes images appear upon button click, but it appears in the top left corner of the screen instead of where I want it to be. I've been trying

function show_image(src, width, height, position, left, top, zIndex, alt) {
      var img = document.createElement("img");
      img.src = src;
      img.width = width;
      img.height = height
      img.position = position;
      img.left = left;
      img.top = top;
      img.style.zIndex = zIndex;
      img.alt = alt;

...But it doesn't work. Any fixes/answers?

EDIT: Question answered. Used:

img.style.position = position;
img.style.left = left;
img.style.top = top;

解决方案

Updated :

If you assign position:absolute ,then you must have to give their left , top or bottom , right !

So :

you have to pass extra parameter to your function, where you want to show your img:

function show_image(src, width, height, position,left,top, zIndex, alt) {  //left,top as example
    var img = document.createElement("img");
    img.src = src;
    img.style.width = width;
    img.style.height = height
    img.style.position = position;
    img.style.left = left+'px';
    img.style.top = top+'px';
    img.style.zIndex = zIndex;
    img.alt = alt;

    document.body.appendChild(img);
}

Or Another Short way to give Style to img is :

img.attributes = "style = left:"+left+"px;top:"+top+"px;...And So on..";

这篇关于在HTML中定位图像（使用创建图像的按钮）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！