您可以使用 JavaScript 实现此功能。下面是一个示例:
HTML:
<a id="mylink" href="#">
<img id="myimage" src="image1.jpg" />
</a>
JavaScript:
var link = document.getElementById("mylink");
var image = document.getElementById("myimage");
link.onmouseover = function() {
image.src = "image2.jpg";
}
link.onmouseout = function() {
image.src = "image1.jpg";
}
这将在鼠标移动到超链接上时显示 “image2.jpg” 图像,在鼠标移出超链接时显示 “image1.jpg” 图像。
这段javascript代码如何完整地插入到html中?
<script>
var link = document.getElementById("mylink");
var image = document.getElementById("myimage");
link.onmouseover = function() {
image.src = "image2.jpg";
}
link.onmouseout = function() {
image.src = "image1.jpg";
}
</script>
<a id="mylink" href="#">
<img id="myimage" src="image1.jpg" />
</a>
您还可以将 JavaScript 代码放在独立的文件中,并在 HTML 中通过 <script>
标签引用:
HTML:
<script src="script.js"></script>
<a id="mylink" href="#">
<img id="myimage" src="image1.jpg" />
</a>
JavaScript(script.js
):
var link = document.getElementById("mylink");
var image = document.getElementById("myimage");
link.onmouseover = function() {
image.src = "image2.jpg";
}
link.onmouseout = function() {
image.src = "image1.jpg";
}