1

通常我在这里为我刚开始的 JavaScript 类寻求帮助，但这是针对我正在处理的个人项目。我有代码（见下文），可以在鼠标悬停时增加照片的大小，并且效果很好。

问题是，我不仅想显示更大的图像，而且对于其中一个，我还想在鼠标悬停时完全显示不同的图像（是的，仍然是更大的尺寸！）。

这是我一直在使用的，但似乎无法使其正常工作（第一张图像是“之前”，第二张是 Photoshop 之后的增强，前后并排）。任何帮助是极大的赞赏。谢谢...

<p><a href="" target="blank"><img class="displayed" src="Images/sheriffcarB4.jpg" width="250" height="150" alt="Photoshop Enhancement" onmouseover= "this.src=Images/sheriffcarcompare.jpg" "this.width=1100;this.height=350;"onmouseout="this.width=250;this.height=150"/></a></p></div>
4

3 回答 3

5

也许是这样的？

<div>
    <p><a href="" target="blank"><img class="displayed" src="Images/sheriffcarB4.jpg" 
    width="250" height="150" alt="Photoshop Enhancement" onmouseover= "this.src='Images/sheriffcarcompare.jpg';this.width=1100;this.height=350;" onmouseout="this.width=250;this.height=150"/></a>
    </p>
</div>

工作演示

在演示中等待一秒，您将鼠标悬停在图像上以更改图像 src。发生这种情况只是因为 src 是第 3 方网站。它将在您的情况下完美运行

于 2013-11-14T05:56:55.907 回答
5

您可以完全不使用 javascript 来做到这一点... :hoverCSS 选择器类似于onmouseoverjavascript 事件。

<style>
   a img.Large { display: none; }

   a:hover img.Small { display: none }
   a:hover img.Large { display: block; }
</style>

<a href="your link">
   <img class="Small" src="Images/sheriffcarB4.jpg" 
      width="250" height="150"
      alt="Photoshop Enhancement" />

   <img class="Large" src="Images/sheriffcarcompare.jpg" 
      width="1100" height="350"
      alt="Photoshop Enhancement" />
</a>
于 2013-11-14T05:58:09.457 回答
2

看到这个小提琴

Html
 <a href="#">
  <img class="actul" src="http://t2.gstatic.com/images?q=tbn:ANd9GcTjlz0eYHrzmEgWQ-xCtzyxIkA6YoZHpG0DnucD1syQXtTLyoZvuQ" width="400" height="300"
  alt="picSmall" />
 <img class="another" src="http://t3.gstatic.com/images?q=tbn:ANd9GcT7cjWFiYeCohI7xgGzgW60EHd-kEJyG3eNEdJJhnhp7RFT6o6m" width="600" height="350"
  alt="picLarge" />
</a>

Css

a img.another { display: none; }

   a:hover img.actul { display: none }
   a:hover img.another { display: block; }
于 2013-11-14T06:04:11.440 回答