我使用这个简单的脚本:
<body>
<script type="text/javascript">
function mouseOver()
{
document.getElementById("img1").src ="images/p2.jpg";
}
function mouseOut()
{
document.getElementById("img1").src ="images/p1.jpg";
}
</script>
<div class="img">
<a target="_blank" href="images/p1.jpg"><img src="images/p1.jpg" alt="Klematis" width="110" height="90" id="img1" onMouseOver= "mouseOver()" onMouseOut="mouseOut()"/></a>
<div class="desc">Add a description of the image here</div>
</div>
图像很大，所以我用宽度和高度属性调整它们，我想如果我只调用函数我会看到更大的图像，但它并没有发生。所以我该怎么做才能看到放大的图像与 onMouseOver？ 如果重要，我会添加样式表:
<style type="text/css">
div.img
{
margin: 2px;
border: 1px solid #0000ff;
height: auto;
width: auto;
float: left;
text-align: center;
}
div.img img
{
display: inline;
margin: 3px;
border: 1px solid #ffffff;
}
div.img a:hover img {border: 1px solid #0000ff;}
div.desc
{
text-align: center;
font-weight: normal;
width: 120px;
margin: 2px;
}
</style>
附言
不要介意<a href我只是使用 w3 学校的原始代码...
P.S 也许我会为此问另一个问题，放大图像的问题已解决，但现在我希望它们以某种 block 形式显示，因为现在如果我将最后一个图像悬停在放大的图像上时甚至有 4 个图像图像远离起始位置，我想让它像画廊 block 一样，并且所有图像都不会在那里显示，而不会超出画廊的边界。任何帮助或其他问题可能更好......
最佳答案
在你的 css 中你可以这样做:
div.img img { height: 90px; width: 110px; }
div.img img:hover { height: auto; width: auto; }
关于javascript - 使用 CSS 和 onMouseOver 显示更大的图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6412119/