如何获得img作为按钮？

Question

There seems to be a problem with my img as button. 我的img作为按钮似乎存在问题。 They don't move together but separately. 他们不会一起移动，而是分开移动。 And its not just the img that is shown but also the button itself and I just want the img to be the button. 它不仅显示了img，还显示了按钮本身，我只想将img作为按钮。 I tried to make it a background img but nothing really worked. 我试图将其设置为背景img，但没有任何效果。

I also want the button to move to the back of the page and don't take up any space. 我还希望按钮移动到页面的背面并且不占用任何空间。 When I use z-index: -1; 当我使用z-index时：-1; the function of button disappears and it no longer works as a button. 按钮的功能消失，不再用作按钮。 How can I do this with different code? 如何使用不同的代码执行此操作？

<!DOCTYPE html>
<html>


<div class="omheen">
<div>
<audio id="audioContainer">
 <source src="spraakbericht.m4a" type="audio/mpeg">
</audio>

<div id="memo">
 <button  id="play" onclick="playMp3()" type="button">
 <img class="memo" src="messages-05.png"/>
</div>
</button>
 <button id="pause" onclick="pauseMp3()" type="button">Pause Mp3</button> 

</div>
</div>

<script>
 const audioContainer = document.getElementById("audioContainer"); 

 function playMp3() { 
  audioContainer.play(); 
} 

function pauseMp3() { 
 audioContainer.pause(); 
} 


</script>

<script>
 var play = document.getElementById("play");
 var pause = document.getElementById("play");
 play.innerHTML = '<img src="\messages-05.png" />';
 pause.innerHTML = '<img src="\messages-05.png" />';
</script>   





</html>

Any help is greatly appreciated! 任何帮助是极大的赞赏！

Answer 1

With the button element in html5 you can put images in between the tags. 使用html5中的button元素，您可以将图像放在标签之间。 Also make sure to set the type attribute with button tags as different browsers use different default types for the button element. 还请确保使用按钮标签设置type属性，因为不同的浏览器对按钮元素使用不同的默认类型。 In order for the button to not take any space you have to set display to none or set it's position to absolute. 为了使按钮不占用任何空间，您必须将显示设置为无或将其位置设置为绝对。 The z-index level could not be affected because the elements are positioned as static. 因为元素被定位为静态，所以z索引级别不会受到影响。

Answer 2

Try typing the img tag inside the button tag. 尝试在button标签内键入img标签。 For example: 例如：

<button id="test><img src="/img/ex.png" alt="Test img"/></button>

Answer 3

You could use 你可以用

<input type="image" src="messages-05.png">

more info: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/image 更多信息： https : //developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input/image

[update] Your code looks a little mixed up. [更新]您的代码看起来有些混乱。 So I tried to clean it up a little to show the use of my suggestion. 因此，我尝试对其进行一些清理，以显示我的建议的用途。

<!DOCTYPE html>
<html>
<head>
 <title>Title</title>
</head>
<body>
<div class="omheen">
 <div>
  <audio id="audioContainer">
   <source src="spraakbericht.m4a" type="audio/mpeg">
  </audio>
 </div>
 <div id="memo">
  <input type="image" id="playButton" src="messages-05.png" onclick="playMp3();">
  <input type="image" id="pauseButton" src="messages-05.png" onclick="pauseMp3();">
 </div>
</div>

<script>
 const audioContainer = document.getElementById("audioContainer");
 var playButton = document.getElementById("playButton");
 var pauseButton = document.getElementById("pauseButton"); 

 function playMp3() { 
  audioContainer.play(); 
 } 

 function pauseMp3() { 
  audioContainer.pause(); 
 } 
</script>
</body>
</html>

Inside the functions you can easily change the images for your buttons by changing the src-attribute of playButton and pauseButton. 在函数内部，可以通过更改playButton和pauseButton的src属性轻松更改按钮的图像。

Make sure, the image is in the same folder as the html-file. 确保图像与html文件位于同一文件夹中。

如何获得img作为按钮？

问题描述

3 个解决方案

解决方案1
1 2019-01-05 20:31:52

解决方案2
0 2019-01-05 19:58:13

解决方案3
0 2019-01-05 20:16:27

如何获得img作为按钮？

问题描述

3 个解决方案

解决方案1 1 2019-01-05 20:31:52

解决方案2 0 2019-01-05 19:58:13

解决方案3 0 2019-01-05 20:16:27

解决方案1
1 2019-01-05 20:31:52

解决方案2
0 2019-01-05 19:58:13

解决方案3
0 2019-01-05 20:16:27