点击图片以改变网站上的文字和图片

我在html中建立一个网站，我有3张图片作为按钮工作。

当我点击图片1我想要text1加上image1出现。
当我点击图片2时，我想让text2加上image2来显示。
当我点击图片3时，我想让text3加上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>

来源

2016-09-04 Thomas Varberg

您_image1的意思，图像2 .._？ –

我想让image1，image2，image3出现。所以我点击按钮1，我想让text1和image1出现。如果我点击按钮2我希望text2和图像2显示 –

你要这样呢？

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; 
 
}

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

<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>

来源

2016-09-04 21:31:55

是的，这就是我一直在寻找。谢谢。还有一件事。如何定位和调整img src ='http：//www.xerys.com/images/xerys/1.png'的宽度和高度？ –

嗨，你可以添加一个自定义类到你的CSS并附上img标签''。 –

嗨，所以我最终会有这样的CSS代码：这不可能是我猜？谢谢 –

这是你有什么期待？

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>

来源

2016-09-04 15:53:22 Gowtham

我不希望按钮改变 - 但这实际上也是一个很酷的功能。我想要的是当我点击button1，image1和文本1出现。（image1和按钮1不是相同的图像） –

好吧，但你还没有在你的代码中创建一个按钮，所以我想这样做 – Gowtham

是的，我知道。我只是使用图像。因此，点击图片时，网站上会显示新图片。 - 但我无法弄清楚那一部分。 –

点击图片以改变网站上的文字和图片

回答

相关问题