如何通过悬停按钮更改图像？ 更多详情如下
[英]how can I change an image by hovering a button? More details below
问题描述
So basically I want to change an image by passing over the mouse on a button.
所以基本上我想通过在按钮上传递鼠标来更改图像。 with the current code I am able to change the image when the button is clicked, but I also need it to change when I put the mouse over the button without having to click it.使用当前代码，我可以在单击按钮时更改图像，但是当我将鼠标放在按钮上而无需单击它时，我也需要更改图像。 Any ideas?有任何想法吗？
<body>
<input type="button" class = "button" onclick="changeImage('https://www.gettyimages.es/gi-resources/images/500px/983794168.jpg')" value="button1" />
<img src="https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MXx8aHVtYW58ZW58MHx8MHw%3D&ixlib=rb-1.2.1&w=1000&q=80" class = "img" id="firstimage" width="310">
<input type="button" class = "button4" onclick="changeImage('https://images.unsplash.com/photo-1494548162494-384bba4ab999?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MXx8c3VucmlzZXxlbnwwfHwwfA%3D%3D&ixlib=rb-1.2.1&w=1000&q=80')" value="button2" />
and the javascript:和 javascript：
var image = document.getElementById('firstimage');
function changeImage(uri) {
image.src = uri;
}
2 个解决方案
解决方案1
0 2021-02-05 15:42:05
You can try this, just give an Id to your Button, in order to get it after.你可以试试这个，只需给你的按钮一个 ID，以便之后得到它。
var button = document.getElementById("buttonId")
var image = document.getElementById('firstimage')
button.onmouseover = function(uri){
image.src = uri
}
解决方案2
0 已采纳 2021-02-05 15:45:16
Do you mean like this?你的意思是这样吗？
like onclick , you can use onmouseover which is same as :hover in css像onclick一样，您可以使用onmouseover ，这与 css 中的:hover相同
var image = document.getElementById('firstimage'); function changeImage(uri) { image.src = uri; }
<input type="button" class = "button" onclick="changeImage('https://www.gettyimages.es/gi-resources/images/500px/983794168.jpg')" onmouseover="changeImage('https://www.gettyimages.es/gi-resources/images/500px/983794168.jpg')" value="button1" /> <img src="https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MXx8aHVtYW58ZW58MHx8MHw%3D&ixlib=rb-1.2.1&w=1000&q=80" class = "img" id="firstimage" width="310"> <input type="button" class = "button4" onclick="changeImage('https://images.unsplash.com/photo-1494548162494-384bba4ab999?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MXx8c3VucmlzZXxlbnwwfHwwfA%3D%3D&ixlib=rb-1.2.1&w=1000&q=80')" onmouseover="changeImage('https://images.unsplash.com/photo-1494548162494-384bba4ab999?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MXx8c3VucmlzZXxlbnwwfHwwfA%3D%3D&ixlib=rb-1.2.1&w=1000&q=80')" value="button2" />
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.