首页html实现鼠标点击切换图片和文字

html实现鼠标点击切换图片和文字

时间: 2024-03-23 16:36:14 浏览: 191

点击按钮切换图片.html

5星 · 资源好评率100%

点击按钮切换图片.html

可以通过以下HTML和JavaScript代码实现鼠标点击切换图片和文字： ```html <!DOCTYPE html> <html> <head> <title>Click to Change</title> </head> <body> <div> <img id="myImg" src="image1.jpg" alt="Image 1"> <p id="myText">Text 1</p> </div> <script> var img = document.getElementById("myImg"); var text = document.getElementById("myText"); var counter = 1; img.addEventListener("click", function() { if (counter == 1) { img.src = "image2.jpg"; text.innerHTML = "Text 2"; counter = 2; } else { img.src = "image1.jpg"; text.innerHTML = "Text 1"; counter = 1; } }); </script> </body> </html> ``` 在这个例子中，我们定义了一个img标签和一个p标签，当我们点击图片时，图片和文本会发生变化。我们使用addEventListener()函数来将点击事件附加到img元素上，当用户单击图片时，我们根据counter变量的值来切换图片和文本的内容。当counter为1时，我们将图片和文本切换为第二个，当counter为2时，我们将它们切换回第一个。

阅读全文