1. 首页
  2. 问答
  3. 带文本和图像的HTML按钮

带文本和图像的HTML按钮

2017-09-23 115 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

相关问题

 相关问题