1. 首頁
  2. 問答
  3. 帶文本和圖像的HTML按鈕

帶文本和圖像的HTML按鈕

2017-09-23 167 views
-1

我在初學者編程課上。我們只是在第四章，請記住這一點。本課程使用的是一些javascript的HTML，但我們還沒有真正深入到javascript。我這周的項目是創建兩個按鈕，當點擊這些按鈕中的每一個時，會出現一張照片和一個段落。我有段落的按鈕，但我不知道如何添加圖像。我在互聯網上找到的所有東西都是超級javascript，我還沒學過東西。這裏是我的代碼，我只是選擇了一個隨機的話題，哈哈帶文本和圖像的HTML按鈕

<!doctype html> 
 
<!--Web page that displays quotes at the click of a button click. --> 
 
<!--============================================================= --> 
 
<html> 
 

 
<head> 
 
    <title>Project2</title> 
 
</head> 
 

 
<body> 
 
    <div style="text-align:center"> 
 
    <p> 
 
     <h2> <span style="color:red">Favorite Animals</span> </h2> 
 
    </p> 
 

 

 
    <input type="button" value="Slow Loris" onmouseover="this.style.backgroundColor='red';" onmouseout="this.style.backgroundColor='white';" onclick="document.getElementById('outputDiv').innerHTML= 
 
    'This animal might look like a harmless, big-eyed baby ewok, but ' + 
 
    'the slow loris is one of the only venomous mammals in the world. ' + 
 
    'Its subtle nature makes it popular in the illegal pet trade, but this ' + 
 
    'furry creature also carries a toxin that is released from the brachial ' + 
 
    'gland on the sides of its elbows. If threatened, the loris can take ' + 
 
    'the toxin into its mouth and mix it with saliva. The animal may also ' + 
 
    'lick or rub its hair with this mixture to deter predators from attack. ' + 
 
    'The toxin can cause death by anaphylactic shock in some people.';"> 
 

 
    <input type="button" value="Sloth" onmouseover="this.style.backgroundColor='red';" onmouseout="this.style.backgroundColor='white';" onclick="document.getElementById('outputDiv').innerHTML= 
 
    'Sloths—the sluggish tree-dwellers of Central and South America—spend ' + 
 
    'their lives in the tropical rain forests. They move through the canopy ' + 
 
    'at a rate of about 40 yards per day, munching on leaves, twigs and buds. ' + 
 
    'Sloths have an exceptionally low metabolic rate and spend 15 to 20 hours ' + 
 
    'per day sleeping. And surprisingly enough, the long-armed animals are ' + 
 
    'excellent swimmers. They occasionally drop from their treetop perches ' + 
 
    'into water for a paddle.';"> 
 
    </div> 
 
    <div id="outputDiv"></div> 
 
</body> 
 

 
</html>

來源

2017-09-23 Chelsea Russell

+0

在按鈕的點擊，你想要的圖像和段落在outputDiv插入。是對的嗎？ – Nil

+1

切爾西你正在看着這個錯誤的方式。爲什麼不讓那些帶有圖像和文字的div出現在他們的面前，點擊這些按鈕就會顯示出來。 – Mihailo

回答

0

你可以使用的<img>的「風格」屬性來實現你在找什麼。在樣式屬性中，您可以設置display:none，以隱藏<img>。要使其再次可見，只需點擊一個按鈕即可將顯示改回display:inline。請嘗試以下操作：

<!doctype html> 
<!--Web page that displays quotes at the click of a button click. --> 
<!--============================================================= --> 
<html> 
<head> 
<title>Project2</title> 
</head> 
<body> 
<div style="text-align:center"> 
<p> 
<h2> <span style="color:red">Favorite Animals</span> </h2> 
<img id='slow' src='slowLoris.jpg' alt='Slow Loris' style='width:200px;height:150px;display:none;'> 
<img id='sloth' src='sloth.jpg' alt='Sloth' style='width:200px;height:150px;display:none;'> 
</p> 


<input type="button" value="Slow Loris" 
onmouseover="this.style.backgroundColor='red';" 
onmouseout="this.style.backgroundColor='white';" 
onclick=" 
document.getElementById('sloth').style='width:200px;height:150px;display:none;' 
document.getElementById('slow').style='width:200px;height:150px;display:inline;' 
document.getElementById('outputDiv').innerHTML= 
'This animal might look like a harmless, big-eyed baby ewok, but ' + 
'the slow loris is one of the only venomous mammals in the world. ' + 
'Its subtle nature makes it popular in the illegal pet trade, but this ' + 
'furry creature also carries a toxin that is released from the brachial ' + 
'gland on the sides of its elbows. If threatened, the loris can take ' + 
'the toxin into its mouth and mix it with saliva. The animal may also ' + 
'lick or rub its hair with this mixture to deter predators from attack. ' + 
'The toxin can cause death by anaphylactic shock in some people.';"> 

<input type="button" value="Sloth" 
onmouseover="this.style.backgroundColor='red';" 
onmouseout="this.style.backgroundColor='white';" 
onclick=" 
document.getElementById('slow').style='width:200px;height:150px;display:none'; 
document.getElementById('sloth').style='width:200px;height:150px;display:inline;' 
document.getElementById('outputDiv').innerHTML= 
'Sloths—the sluggish tree-dwellers of Central and South America—spend ' + 
'their lives in the tropical rain forests. They move through the canopy ' + 
'at a rate of about 40 yards per day, munching on leaves, twigs and buds. ' + 
'Sloths have an exceptionally low metabolic rate and spend 15 to 20 hours ' + 
'per day sleeping. And surprisingly enough, the long-armed animals are ' + 
'excellent swimmers. They occasionally drop from their treetop perches ' + 
'into water for a paddle.'"> 
</div> 
<div id="outputDiv"></div> 
</body> 
</html>

編輯
如果你不介意改變你的代碼位，更清潔的解決方案是：

<!doctype html> 
<!--Web page that displays quotes at the click of a button click. --> 
<!--============================================================= --> 
<html> 
<head> 
<title>Project2</title> 
</head> 
<body style='text-align:center'> 

<h2> <span style="color:red">Favorite Animals</span> </h2> 

<div id='slow' style='text-align:center;display:none'>  
    <img src='slowLoris.jpg' alt='Slow Loris'> 
    <p>This animal might look like a harmless, big-eyed baby ewok, but 
     the slow loris is one of the only venomous mammals in the world. 
     Its subtle nature makes it popular in the illegal pet trade, but this 
     furry creature also carries a toxin that is released from the brachial 
     gland on the sides of its elbows. If threatened, the loris can take 
     the toxin into its mouth and mix it with saliva. The animal may also 
     lick or rub its hair with this mixture to deter predators from attack. 
     The toxin can cause death by anaphylactic shock in some people.</p> 
</div> 

<div id='sloth' style='text-align:center;display:none'>  
    <img src='sloth.jpg' alt='Sloth'> 
    <p> Sloths—the sluggish tree-dwellers of Central and South America—spend 
     their lives in the tropical rain forests. They move through the canopy 
     at a rate of about 40 yards per day, munching on leaves, twigs and buds. 
     sloths have an exceptionally low metabolic rate and spend 15 to 20 hours 
     per day sleeping. And surprisingly enough, the long-armed animals are 
     excellent swimmers. They occasionally drop from their treetop perches 
     into water for a paddle.</p> 
</div> 


<input type="button" value="Slow Loris" 
onmouseover="this.style.backgroundColor='red';" 
onmouseout="this.style.backgroundColor='white';" 
onclick=" 
document.getElementById('slow').style='text-align:center;display:inline'; 
document.getElementById('sloth').style='text-align:center;display:none'"> 

<input type="button" value="Sloth" 
onmouseover="this.style.backgroundColor='red';" 
onmouseout="this.style.backgroundColor='white';" 
onclick=" 
document.getElementById('sloth').style='text-align:center;display:inline'; 
document.getElementById('slow').style='text-align:center;display:none'"> 

</div> 
</body> 
</html>

來源

2017-09-23 22:15:55 oRole

0

簡單的只是把圖像裏面，見的jsfiddle

<input type="button" value="Slow Loris" 
onmouseover="this.style.backgroundColor='red';" 
onmouseout="this.style.backgroundColor='white';" 
onclick="document.getElementById('outputDiv').innerHTML= 
'<img src=https://www.thepharmaletter.com/media/image/actavis-logo-small.jpg>' + 
'This animal might look like a harmless, big-eyed baby ewok, but ' + 
'the slow loris is one of the only venomous mammals in the world. ' + 
'Its subtle nature makes it popular in the illegal pet trade, but this ' + 
'furry creature also carries a toxin that is released from the brachial ' + 
'gland on the sides of its elbows. If threatened, the loris can take ' + 
'the toxin into its mouth and mix it with saliva. The animal may also ' + 
'lick or rub its hair with this mixture to deter predators from attack. ' + 
'The toxin can cause death by anaphylactic shock in some people.';">

https://jsfiddle.net/bxcz3f8g/

來源

2017-09-23 22:17:35

0

由於屬性名稱暗示，innerHTML可以是一個完整的HTML內容，而不僅僅是文本。你可以放任何有效的HTML。根據最佳實踐，您應該將這些操作寫入單獨的js文件並導入。

function addContent(event) { 
 
    document.getElementById('outputDiv').innerHTML = 
 
    '<img width="80" src="https://i.ytimg.com/vi/n7gcats5uCQ/maxresdefault.jpg"/><br/><p>Sloths—the sluggish tree-dwellers of Central and South America—spend ' + 
 
    'their lives in the tropical rain forests. They move through the canopy ' + 
 
    'at a rate of about 40 yards per day, munching on leaves, twigs and buds. ' + 
 
    'Sloths have an exceptionally low metabolic rate and spend 15 to 20 hours ' + 
 
    'per day sleeping. And surprisingly enough, the long-armed animals are ' + 
 
    'excellent swimmers. They occasionally drop from their treetop perches ' + 
 
    'into water for a paddle.</p>' 
 
}
<button onClick="addContent()">Sloth</button> 
 
<div id="outputDiv" />

來源

2017-09-23 22:42:06 Nil

0

您需要使用圖片標籤<img>插入圖像，例如

<img src="https://www.internationalanimalrescue.org/sites/default/files/sumatran_slow_loris.jpg">

這裏的值爲src指向圖像的來源。你也可以使用計算機上的一個（只需指定它的HTML文件的相對路徑）。

其他幾點。您可以使用<button>來創建按鈕。 <input>是創建用戶輸入字段。最好將HTMl從Javascript代碼中分離出來，然後用代碼切換其顯示屬性（如果您已經瞭解它，也可以將這些代碼移動到與按鈕創建不同的位置）。

<div style="text-align:center"> 
 
<p> 
 
<h2> <span style="color:red">Favorite Animals</span> </h2> 
 
</p> 
 

 

 
<button type="button" 
 
onmouseover="this.style.backgroundColor='red';" 
 
onmouseout="this.style.backgroundColor='white';" 
 
onclick="document.getElementById('outputDiv1').style.display = 'block'; document.getElementById('outputDiv2').style.display = 'none'">Slow Loris</button> 
 

 
<button type="button" 
 
onmouseover="this.style.backgroundColor='red';" 
 
onmouseout="this.style.backgroundColor='white';" 
 
onclick="document.getElementById('outputDiv2').style.display = 'block'; 
 
document.getElementById('outputDiv1').style.display = 'none'"> Sloth</button> 
 

 
</div> 
 

 
<div id="outputDiv1" style="display:none">slow loris<img src="https://www.internationalanimalrescue.org/sites/default/files/sumatran_slow_loris.jpg" alt="loris" height="100" width="140"></div> 
 
<div id="outputDiv2" style="display:none">sloth<img src="http://kids.nationalgeographic.com/content/dam/kids/photos/animals/Mammals/Q-Z/sloth-beach-upside-down.adapt.945.1.jpg" alt="sloth" height="100" width="140"></div>

來源

2017-09-23 22:44:03 EJ2015

相關問題

 相關問題