點擊圖片以改變網站上的文字和圖片

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

是的，我知道。我只是使用圖像。因此，點擊圖片時，網站上會顯示新圖片。 - 但我無法弄清楚那一部分。 –

點擊圖片以改變網站上的文字和圖片

回答

相關問題