画像をクリックしてテキストと他の画像を変更してください

私はここJSのために少し助けが必要です。画像をクリックしてテキストと他の画像を変更してください

私は3つの写真がボタンとして機能するhtmlのウェブサイトを構築しています。

画像1をクリックすると、text1とimage1が表示されます。
画像2をクリックすると、text2とimage2が表示されます。
画像3をクリックすると、画像3が表示されます。

テキストは私のために今働いています：私は画像1をクリックすると、サイト上に表示されます。

私は写真を追加するために助けが必要です。ここで

は私のコードです：

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、image2、image3を表示します。だから、ボタン1をクリックして、text1とimage1を表示させたい。ボタン2をクリックすると、テキスト2と画像2が表示されます。 –

あなたはこのような何かをしたいですか？あなたが_image1、画像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、およびtext1が表示されたときです。（画像1とボタン1は同じ画像ではありません） –

あなたはコード内にボタンを作成していないので、私はこのことを考えました – Gowtham

私は知っています。私はイメージを使用します。画像がクリックされると、新しい画像がサイトに表示されます。 - しかし、私はその部分を理解することはできません。 –

画像をクリックしてテキストと他の画像を変更してください

答えて

関連する問題