带有文本和图像的HTML按钮
我在上初级编程课。我们只讲第四章，所以请记住这一点。这个类使用HTML和一些带有文本和图像的HTML按钮,html,button,Html,Button,我在上初级编程课。我们只讲第四章，所以请记住这一点。这个类使用HTML和一些javascript，我们还没有深入了解javascript。我这周的计划是创建两个按钮，当每一个按钮都被点击时，就会出现一张照片和一段文字。我有一个带段落的按钮，但我不知道如何添加图像。我在互联网上找到的一切都是超级javascript，我还没有学过的东西。这是我的代码，我只是随便挑了个话题，哈哈 项目2 喜爱的动物 您可以使用 编辑 如果您不介意稍微更改代码，一个更干净的解决方案是： <!docty
javascriptjavascriptjavascript
项目2
喜爱的动物
如果您不介意稍微更改代码，一个更干净的解决方案是：
<!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>
项目2
喜爱的动物
这种动物看起来像一个无害的大眼睛伊渥克宝宝，但是
懒猴是世界上唯一的有毒哺乳动物之一。
其微妙的性质使其在非法宠物贸易中广受欢迎，但这一点
这种毛茸茸的生物还携带一种从肱动脉释放的毒素
肘部两侧的腺体。如果受到威胁，懒猴可以采取行动
毒素进入它的口腔并与唾液混合。这种动物也可能
用这种混合物舔或摩擦它的毛发，以阻止食肉动物的攻击。
这种毒素会导致一些人因过敏性休克而死亡
中美洲和南美洲行动迟缓的树上居民的树懒
他们生活在热带雨林中。它们穿过树冠
以每天大约40码的速度，咀嚼树叶、树枝和花蕾。
树獭的新陈代谢率极低，需要花费15到20个小时
每天睡觉。令人惊讶的是，长臂动物
优秀的游泳运动员。它们偶尔会从树梢的栖木上掉下来
到水里划桨
<!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>
正如属性名称所示，
innerHTML函数addContent（事件）{
document.getElementById（'outputDiv'）.innerHTML=
“
中美洲和南美洲行动迟缓的树上居民用树懒消费”+
“它们生活在热带雨林中，穿过树冠”+
“以每天大约40码的速度，咀嚼树叶、树枝和花蕾。”+
树懒的新陈代谢率极低，需要15到20个小时+
每天睡觉。令人惊讶的是，长臂动物+
“优秀的游泳运动员。他们偶尔会从树梢的栖木上掉下来”+
“到水里划桨。”
}树懒
单击按钮，您希望在outputDiv中插入图像和段落。是吗？切尔西，你看得不对。你为什么不在这些div中添加图像和文本，点击按钮就会显示出来呢。
<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.';">
<img src="https://www.internationalanimalrescue.org/sites/default/files/sumatran_slow_loris.jpg">