Question

我使用这个简单的脚本：

<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>

P.S

不介意<a href我只使用w3学校的原始代码...

PS也许我会问另一个问题，放大图像的问题已经解决，但是现在我希望它们能够在某种块中显示出来，如果我有甚至4个iamges当我将最后一个放大时图像远离起始位置，我想让它像画廊块一样，所有图像都显示在那里，不要走出画廊的边界。任何帮助或者可能是另一个Q更好......

Answer 1

在你的CSS中，你可以这样做：

div.img img { height: 90px; width: 110px; }
div.img img:hover { height: auto; width: auto; }

Answer 2

你必须写：

img:hover {
   width: 120px;
}

Answer 3

您需要相应地调整高度和宽度：

function mouseOver()
{
var img1 = document.getElementById("img1");
img1.src ="images/p2.jpg";
img1.width = "";
img1.height = "";
}
function mouseOut()
{
var img1 = document.getElementById("img1");
img1.src ="images/p1.jpg";
img1.width = "90";
img1.height = "110";
}

但是，现在，正如Emil所建议的那样，建议使用CSS。

用CSS和onMouseOver显示更大的图像

3 个答案: