按钮的位置除了图像

Question

我有单张图片和5个按钮，我想将图片放在图片的右上角一侧，按钮应该是一个高于另一个。目前，按钮位于图像的右下方，并且排成一排。

＆＃13;

＆＃13;

function pictureChange(imgId, path) {
  document.getElementById(imgId).src = path;
}

＆＃13;

p {
  display: inline-block;
}

＆＃13;

<img id="scene1" src="images/scene1/scene1-4dof.png">

<p>
  <input type="button" value="4DOF" onclick="pictureChange('scene1','images/scene1/scene1-4dof.png')">
</p>
<p>
  <input type="button" value="6DOF" onclick="pictureChange('scene1','images/scene1/scene1-6dof.png')">
</p>
<p>
  <input type="button" value="6DOF-PCA" onclick="pictureChange('scene1','images/scene1/scene1-6dof-pca.png')">
</p>
<p>
  <input type="button" value="7DOF" onclick="pictureChange('scene1','images/scene1/scene1-7dof.png')">
</p>
<p>
  <input type="button" value="7DOF-PCA" onclick="pictureChange('scene1','images/scene1/scene1-7dof-pca.png')">
</p>

＆＃13;

＆＃13;

＆＃13;

Answer 1

function pictureChange(imgId,path) {
  document.getElementById(imgId).src=path;
}

.sid {
  display: inline-block;
  vertical-align: top;
}

img {
  width:200px;
  height:200px;
}

.sid input {
  display: block;
}

<img class="sid" id="scene1" src="http://via.placeholder.com/200x200">
<!---->
<div class="sid">
  <input type="button" value="4DOF" onclick="pictureChange('scene1','images/scene1/scene1-4dof.png')">
  <input type="button" value="6DOF" onclick="pictureChange('scene1','images/scene1/scene1-6dof.png')">
  <input type="button" value="6DOF-PCA" onclick="pictureChange('scene1','images/scene1/scene1-6dof-pca.png')">
  <input type="button" value="7DOF" onclick="pictureChange('scene1','images/scene1/scene1-7dof.png')">
  <input type="button" value="7DOF-PCA" onclick="pictureChange('scene1','images/scene1/scene1-7dof-pca.png')">
</div>

我所做的是将display: inline-block;添加到图像中并添加div'i以包含输入'

<!---->中的inline行为的inline-block显示了元素之间的任何间距

右上角的

也是vertical-align: top;

Answer 2

此解决方案将根据周围元素进行缩放。为了表明这一点，我添加了一个额外的包装器。

＆＃13;

＆＃13;

.wrapper {
  position: relative; 
  /* width of the image here */
}
.wrapper .buttons {
  position: absolute;
  right: 3%;
  top: 3%;
}
#scene1 {
  width: 100%;
  height: auto;
}

＆＃13;

<div class="wrapper">
  <img id="scene1" src="http://via.placeholder.com/350x150">
  <div class="buttons">
    <p><input type="button" value="4DOF" onclick="pictureChange('scene1','images/scene1/scene1-4dof.png')"></p>
    <p><input type="button" value="6DOF" onclick="pictureChange('scene1','images/scene1/scene1-6dof.png')"></p>
    <p><input type="button" value="6DOF-PCA" onclick="pictureChange('scene1','images/scene1/scene1-6dof-pca.png')"></p>
    <p><input type="button" value="7DOF" onclick="pictureChange('scene1','images/scene1/scene1-7dof.png')"></p>
    <p><input type="button" value="7DOF-PCA" onclick="pictureChange('scene1','images/scene1/scene1-7dof-pca.png')"></p>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

Pure Css：

1）图片上的按钮：

＆＃13;

＆＃13;

div {
    position: relative;
    display: inline-block;
}

img {
    width:300px;
    border:1px solid #000;
}

.right {
    position: absolute;
    top: 0;
    right: 0;
    background-color: rgba(0,0,0,0.7);
    text-align: center;
}

＆＃13;

<div>
<img id="scene1" src="http://justcuteanimals.com/wp-content/uploads/2016/10/baby-bear-pictures-cute-animal-pics.jpg">
<div class="right">
<p><input type="button" value="4DOF" onclick="pictureChange('scene1','images/scene1/scene1-4dof.png')"></p>
<p><input type="button" value="6DOF" onclick="pictureChange('scene1','images/scene1/scene1-6dof.png')"></p>
<p><input type="button" value="6DOF-PCA" onclick="pictureChange('scene1','images/scene1/scene1-6dof-pca.png')"></p>
<p><input type="button" value="7DOF" onclick="pictureChange('scene1','images/scene1/scene1-7dof.png')"></p>
<p><input type="button" value="7DOF-PCA" onclick="pictureChange('scene1','images/scene1/scene1-7dof-pca.png')"></p>
</div>
</div>

＆＃13;

＆＃13;

＆＃13;

2）图像后的按钮：

＆＃13;

＆＃13;

div {
    position: relative;
    display: inline-block;
}

img {
    width:200px;
    border:1px solid #000;
}

.right {
    background-color: rgba(0,0,0,0.7);
    text-align: center;
    vertical-align: top;

}

＆＃13;

<div>
<img id="scene1" src="http://justcuteanimals.com/wp-content/uploads/2016/10/baby-bear-pictures-cute-animal-pics.jpg">
<div class="right">
<p><input type="button" value="4DOF" onclick="pictureChange('scene1','images/scene1/scene1-4dof.png')"></p>
<p><input type="button" value="6DOF" onclick="pictureChange('scene1','images/scene1/scene1-6dof.png')"></p>
<p><input type="button" value="6DOF-PCA" onclick="pictureChange('scene1','images/scene1/scene1-6dof-pca.png')"></p>
<p><input type="button" value="7DOF" onclick="pictureChange('scene1','images/scene1/scene1-7dof.png')"></p>
<p><input type="button" value="7DOF-PCA" onclick="pictureChange('scene1','images/scene1/scene1-7dof-pca.png')"></p>
</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

   var options = {
      host: "proxypath",
      port: 8080,
      path: "http://www.google.co.uk",
      headers: {
        Host: "http://www.google.co.uk"
      }
    };
    http.request(options, function(response) {
      console.log(response.statusCode);
      response.pipe(process.stdout);
    });

function pictureChange(imgId,path) {
  document.getElementById(imgId).src=path;
}

.img_con{
  width:400px;
  height:400px;
  position: relative;
}
.sid {
  position: absolute;

}

img {
  width:400px;
  height:400px;
}
.onTop{
  position: absolute;
  top:0;
  right: 0;
}
.sid input {
  display: block;
}