更改位于相同位置的图像的html按钮

时间：2016-10-19 08:34:03

标签： javascript html css

我正在使用带有Sublime的HTML5，我想创建一个按钮，使可见或隐藏的两个图像交替位于同一位置。因此，如果我单击按钮应该出现第一个图像，如果我再次单击按钮，第一个图像应该消失，应该出现第二个图像，依此类推。 但是我不知道如何在同一个地方找到图像。

这是我的HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Prova Preparazione</title>
    <script src="jsTs.js"></script>
    <link rel="stylesheet" type="text/css" href="cssTs.css">
</head>
<body>
    <h1>Lorem Ipsum</h1>
    <br>
    <div>
        <h3>Cos’è Lorem Ipsum?</h3>
        Lorem Ipsum è un testo segnaposto utilizzato nel settore della tipografia e della stampa. Lorem Ipsum è considerato il testo segnaposto standard sin dal sedicesimo secolo, quando un anonimo tipografo prese una cassetta di caratteri e li assemblò per preparare un testo campione. È sopravvissuto non solo a più di cinque secoli, ma anche al passaggio alla videoimpaginazione, pervenendoci sostanzialmente inalterato. Fu reso popolare, negli anni ’60, con la diffusione dei fogli di caratteri trasferibili “Letraset”, che contenevano passaggi del Lorem Ipsum, e più recentemente da software di impaginazione come Aldus PageMaker, che includeva versioni del Lorem Ipsum.
    <br>
    <h3>Perchè lo utilizziamo?</h3>
        È universalmente riconosciuto che un lettore che osserva il layout di una pagina viene distratto dal contenuto testuale se questo è leggibile. Lo scopo dell’utilizzo del Lorem Ipsum è che offre una normale distribuzione delle lettere (al contrario di quanto avviene se si utilizzano brevi frasi ripetute, ad esempio “testo qui”), apparendo come un normale blocco di testo leggibile. Molti software di impaginazione e di web design utilizzano Lorem Ipsum come testo modello. Molte versioni del testo sono state prodotte negli anni, a volte casualmente, a volte di proposito (ad esempio inserendo passaggi ironici).
    </div>
    <br>
    <div id="myDiv" >
        <button type="button" onclick="showImage()">Change image!</button> 
        <img src="http://random-ize.com/lorem-ipsum-generators/lorem-ipsum/lorem-ipsum.jpg" alt="Lorem" id="myImageId">
        <img src="http://www.metal-archives.com/images/1/5/5/0/15500_logo.jpg" alt="Lorem2" id="myImageId2">
</body>
</html>

这是我的css代码：

body {
    background-color: yellow;
}

h1 {
    margin-left: 510px;
}

div {
    column-count: 2;
    padding-left: 50px
    padding-right: 50px;

}

button {
    background-color: red;
    width: 100px;
    height: 70px;
    margin-left: 50px;
    margin-top: 50px;

}
/*
div img {
    margin-left: 735px;
    width:304px;
    height:228px;
    visibility:hidden;
} */

#myImageId {
    margin-left: 55px;
    width:304px;
    height:228px;
    visibility:visible;

}

#myImageId2 {
    margin-left: 55px;
    width:304px;
    height:228px;
    visibility:visible;

}

#myDiv {
    display: flex;
}

#myCanvas {
    margin-left: 55px;
    width:304px;
    height:228px;
    visibility:visible;
    border:1px solid black;

}

最后是js代码：

function showImage() {
    var img = document.getElementById('myImageId');
    var img2 = document.getElementById('myImageId2');
    if( img.style.visibility == 'visible') {
        img.style.visibility = 'hidden';
        img2.style.visibility = 'visible';
    } else {
        img.style.visibility = 'visible';
        img2.style.visibility = 'hidden';
    }

}

有人可以帮助我吗？

7 个答案:

答案 0 :(得分：0)

您还必须使用display将图像显示在同一位置：

if( img.style.visibility == 'visible') {
        img.style.visibility = 'hidden';
        img.style.display = 'none';
        img2.style.visibility = 'visible';
        img2.style.display  = 'block';
    } else {
        img.style.visibility = 'visible';
        img.style.display = 'block';
        img2.style.visibility = 'hidden';
        img2.style.display = 'none';
    }

visibility="hidden"会使图片隐身，但会保留图片的显示空间。

答案 1 :(得分：0)

将两个图像放在容器中，比如说图像容器

<div class='image-container'>
<div id="myDiv" >
<button type="button" onclick="showImage()">Change image!</button> 
        <img src="http://random-ize.com/lorem-ipsum-generators/lorem-ipsum/lorem-ipsum.jpg" alt="Lorem" id="myImageId">
        <img src="http://www.metal-archives.com/images/1/5/5/0/15500_logo.jpg" alt="Lorem2" id="myImageId2">
</div>
</div>

给图像容器一定的高度和位置相对，并给两个图像位置绝对。

.image-contaner{
position: relative;
height: 228px;
width: 304px;
}
#myImageId {
    margin-left: 55px;
    width:304px;
    height:228px;
    visibility:visible;
position: absolute;
}

#myImageId2 {
    margin-left: 55px;
    width:304px;
    height:228px;
    visibility:visible;
position: absolute;

}

答案 2 :(得分：0)

您可以使用属性visibility，而不是display，而不是#myImageId { margin-left: 55px; width: 304px; height: 228px; display: block; } #myImageId2 { margin-left: 55px; width: 304px; height: 228px; display: none; } 。

的CSS：

function showImage() {
    var img = document.getElementById('myImageId');
    var img2 = document.getElementById('myImageId2');
    if( img.style.display == 'block') {
        img.style.display = 'none';
        img2.style.display = 'block';
    } 
    else {
        img.style.display = 'block';
        img2.style.display= 'none';
    }
}

JS：

/// <autosync enabled="true" />

答案 3 :(得分：0)

您可以使用CSS位置执行此操作。只需设置两个图像＆＃39;位置绝对。请记住将外部div位置设置为相对位置。

这是一个简单的CSS代码段

#myDiv {
  position: relative;
}

#img1 {
  position: absolute;
  top: 0px;
  left: 0px;
}

#img2 {
  position: absolute;
  top: 0px;
  left: 0px;
}

这两个图像将处于相同的位置。

答案 4 :(得分：0)

您应该使用CSS display属性而不是visibility。

这样做的原因是，如果使用visibility使元素不可见，浏览器会认为它仍占用页面上的空间，它只是不可见。使用display属性时，它将从空间计算中删除元素，这意味着在您的情况下，第二个图像将随机播放到先前由第一个图像占据的空间中。 CSS：

#myImageId {
  margin-left: 55px;
  width:304px;
  height:228px;
  display:block;
}

#myImageId2
{
  display:none;
}

JS：

if( img.style.display == 'none') {
    img.style.display = 'none';
    img2.style.display  = 'block';
} else {
    img.style.display = 'block';
    img2.style.display = 'none';
}

答案 5 :(得分：0)

短而简单

#myDiv img{
   position: absolute;
   padding-left: 0px;
}

答案 6 :(得分：0)

如果您在CSS中添加.hide {display: none;}，您也可以将其用于更多元素。

var hide = document.getElementsByClassName('hide');
var j = 1;

function hideimg() {
  for (var i = 0; i < hide.length; i++) {
    hide[i].style = "display:none;";
  }
  if (j < hide.length) {
    hide[j].style = "display:block;";
    j++;
  } else {
    j = 0;
    hide[j].style = "display:block;";
    j = 1;
 }
}
相关问题
最新问题