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

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

时间: 2024-03-23 19:36:15 浏览: 127

可以通过以下HTML和JavaScript代码来实现鼠标点击图片切换图片和文字： ```html <!DOCTYPE html> <html> <head> <title>Click to Change</title> <style> img { cursor: pointer; /* 将鼠标光标变为手型 */ } </style> </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标签，当我们点击图片时，图片和文本会发生变化。我们使用CSS样式将鼠标光标变为手型，以提示用户该图片可以被点击。我们使用addEventListener()函数将点击事件附加到img元素上，当用户单击图片时，我们根据counter变量的值来切换图片和文本的内容。当counter为1时，我们将图片和文本切换为第二个，当counter为2时，我们将它们切换回第一个。

阅读全文