Question

我是JS的新手，所以我需要一点帮助。

我正在用html构建一个网站，我有3张图片作为按钮。

当我点击图片1时，我想要显示text1 plus image1。
当我点击图片2时，我想要显示text2 plus image2。
当我点击图片3时，我想要显示text3 plus image3。

这篇文章现在对我有用，所以：当我点击图片1时，text1正在网站上显示。

所以我需要帮助来添加图片。

这是我的代码：

function changeText(value) {
    var div = document.getElementById("div");
    var text = "";
    var image = "";

    if (value == 1) text += "this is picture one";
    if (value == 2) text += "this is picture two";
    if (value == 3) text += "this is picture tree";

    div.innerHTML = text;

<a href="javascript: changeText(1);">
   <img id="searchconsumers" src="images/search.png" width="40px" height="40px" alt="abc" />
</a>
<a href="javascript: changeText(2);">
   <img id="exploreconsumers" src="images/explore.png" width="40px" height="40px" alt="abc" />
</a>
<a href="javascript: changeText(3);">
   <img id="funconsumers" src="images/fun.png" width="40px" height="40px" alt="abc" />
</a>
<div id="div"></div>

Answer 1

这是你期待的？

function changeText(value) {
    var div = document.getElementById("div");
    var text = "";
    var image = "";

    if (value == 1) {
    document.getElementById("searchconsumers").style.cssText="transform: scale(2); transition: all 1s linear"; 
        document.getElementById("exploreconsumers").style.cssText="transform: scale(1);transition: all 1s linear"; 
    document.getElementById("funconsumers").style.cssText="transform: scale(1);transition: all 1s linear"; 

    text += "this is picture one";
     div.innerHTML = text;
     
      
    }
    if (value == 2){
     document.getElementById("searchconsumers").style.cssText="transform: scale(1);transition: all 1s linear"; 
        document.getElementById("exploreconsumers").style.cssText="transform: scale(2);transition: all 1s linear"; 
    document.getElementById("funconsumers").style.cssText="transform: scale(1);transition: all 1s linear"; 
    text += "this is picture two";
     div.innerHTML = text;}
    if (value == 3) {
       document.getElementById("searchconsumers").style.cssText="transform: scale(1);transition: all 1s linear"; 
        document.getElementById("exploreconsumers").style.cssText="transform: scale(1);transition: all 1s linear"; 
    document.getElementById("funconsumers").style.cssText="transform: scale(2);transition: all 1s linear"; 
    text += "this is picture tree";
     div.innerHTML = text;}

   
  }

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>


<a href="javascript: changeText(1);">
   <img id="searchconsumers" src="http://vignette3.wikia.nocookie.net/supersmashbrosfanon/images/9/91/SSB4_-_Pikachu_Artwork.png/revision/latest?cb=20150727015314" width="40px" height="40px" alt="test1" />
</a>
<a href="javascript: changeText(2);">
   <img id="exploreconsumers" src="http://img2.wikia.nocookie.net/__cb20120906164108/fantendo/images/e/ee/Super_Mushroom_for_tlotll.png" width="40px" height="40px" alt="test2" />
</a>
<a href="javascript: changeText(3);">
   <img id="funconsumers" src="http://www.imagenspng.com.br/wp-content/uploads/2015/02/small-super-mario.png" width="40px" height="40px" alt="test3" />
</a>
<br/>
<br/>
<div id="div"></div>
  </body>

</html>

function a(value) {
    if (value == 1) {
    document.getElementById("image1").style.cssText="display:block";
          document.getElementById("image2").style.cssText="display:none";     
    document.getElementById("image3").style.cssText="display:none";     

  }
 if (value == 2) {
    document.getElementById("image1").style.cssText="display:none";
          document.getElementById("image2").style.cssText="display:block";     
    document.getElementById("image3").style.cssText="display:none";     

  }
   if (value == 3) {
    document.getElementById("image1").style.cssText="display:none";
          document.getElementById("image2").style.cssText="display:none";     
    document.getElementById("image3").style.cssText="display:block";     

  }
}

a{
text-decoration:none;
color:black;
}
#image1,#image2,#image3{
display:none;
}
#main1{
display:inline-block;
}
input[type="submit"] {
background: #0066A2;
color: white;
border-style: outset;
border-color: #0066A2;
height: 50px;
width: 100px;
font: bold 15px arial, sans-serif;

}

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
<div id="main1">
<input type="submit" value="pika" onclick="a(1)">
    <br/> <br/>
<a href="javascript: changeText(1);">
    <div id="image1">
   <img id="searchconsumers" src="http://vignette3.wikia.nocookie.net/supersmashbrosfanon/images/9/91/SSB4_-_Pikachu_Artwork.png/revision/latest?cb=20150727015314" width="40px" height="40px" alt="test1" />
    <p>This is image1</p>
    </div>
</a>
  </div>
    
    
    <div id="main1">
    <input type="submit" value="muss" onclick="a(2)">
    <br/> <br/>
<a href="javascript: changeText(2);">
    <div id="image2">
   <img id="exploreconsumers" src="http://img2.wikia.nocookie.net/__cb20120906164108/fantendo/images/e/ee/Super_Mushroom_for_tlotll.png" width="40px" height="40px" alt="test1" />
    <p>This is image2</p>
    </div>
</a>
      </div>
    
    
    <div id="main1">
    <input type="submit" value="mario" onclick="a(3)">
    <br/> <br/>
<a href="javascript: changeText(3);">
    <div id="image3">
   <img id="funconsumers" src="http://www.imagenspng.com.br/wp-content/uploads/2015/02/small-super-mario.png" width="40px" height="40px" alt="test1" />
    <p>This is image3</p>
    </div>
</a>
  </div>  
  </body>

</html>

Answer 2

你想要这样的东西吗？

＆＃13;

function changeText(value) {
  var div = document.getElementById("div");
  var text = "";
  var image = "";

  if (value == 1) text += "this is picture one <br> <img class='custom_h_w' src='http://www.xerys.com/images/xerys/1.png'/>";
  if (value == 2) text += "this is picture two <br> <img class='custom_h_w' src='http://www.xerys.com/images/xerys/2.png'/>";
  if (value == 3) text += "this is picture tree <br> <img class='custom_h_w' src='http://www.xerys.com/images/xerys/3.png'/>";

  div.innerHTML = text;
}

＆＃13;

.custom_h_w{
  top: 120px;
  right: 200px;
  position: absolute;
}

＆＃13;

<a href="javascript: changeText(1);">
   <img id="searchconsumers" src="images/search.png" width="40px" height="40px" alt="abc" />
</a>
<a href="javascript: changeText(2);">
   <img id="exploreconsumers" src="images/explore.png" width="40px" height="40px" alt="abc" />
</a>
<a href="javascript: changeText(3);">
   <img id="funconsumers" src="images/fun.png" width="40px" height="40px" alt="abc" />
</a>
<div id="div"></div>

＆＃13;

单击图像可更改站点上的文本和其他图像

2 个答案: