Javascript 在鼠标上方显示另一张较大的照片

通常我来这里是为了帮助我刚开始的JavaScript类，但这是为了我正在处理的一个个人项目。我有代码（见下文）可以增加鼠标上方照片的大小，而且效果很好

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

这是我一直在使用的图像，但似乎无法使其正常工作（第一幅图像是“before”，第二幅是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>

也许是这样的

<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是第三方网站。它在你的情况下会很好地工作

也许是这样的

<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是第三方网站。它将在您的情况下完美工作

您完全不需要使用javascript就可以做到这一点。。。

：hover

CSS选择器类似于

onmouseover

javascript事件

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

img.Large{display:none；}
a:悬停img.Small{display:none}
a:悬停img.Large{display:block；}

您完全不需要使用javascript就可以做到这一点。。。

：hover

CSS选择器类似于

onmouseover

javascript事件

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

img.Large{display:none；}
a:悬停img.Small{display:none}
a:悬停img.Large{display:block；}

见此

Html
Css
另一个{display:none；}
a:悬停img.actul{display:none}
a：悬停img.other{display:block；}

见此

Html
Css
另一个{display:none；}
a:悬停img.actul{display:none}
a：悬停img.other{display:block；}

您似乎在图像名称后面加了一个双引号，而不是分号。谢谢您，法雷什。让它与everyones一起工作帮助…你似乎在图像名称后加上了双引号，而不是分号。谢谢你，法雷什。让它与everyones一起工作帮助…谢谢@MarsOne，但这似乎不起作用-与我一直尝试的非常相似，我相信它会起作用，但似乎无法获得所需的确切语法！）你看过演示了吗？这是你的代码本身。我刚刚修复了你的语法错误。这对我来说很有用。是的，查看了你的演示，看到它工作了，但我复制了上面代码的更改，并尝试了，但它对我不起作用？！？所有其他人都在页面上工作，但当鼠标移到上面时，它们只是较大的图像-这一个需要不同，因为它将显示一个前/后图像…啊。这就是问题所在。让我帮你修一下。现在试试代码。它应该会起作用。控制台会抛出什么错误？谢谢@MarsOne，但这似乎不起作用-与我一直尝试的非常类似，我相信它会起作用，但似乎无法获得所需的确切语法！）你看过演示了吗？这是你的代码本身。我刚刚修复了你的语法错误。这对我来说很有用。是的，查看了你的演示，看到它工作了，但我复制了上面代码的更改，并尝试了，但它对我不起作用？！？所有其他人都在页面上工作，但当鼠标移到上面时，它们只是较大的图像-这一个需要不同，因为它将显示一个前/后图像…啊。这就是问题所在。让我帮你修一下。现在试试代码。它应该会起作用。控制台会抛出什么错误？我希望保持页面上的内容一致，但是在这种情况下，使用严格的HTML而不是JavaScript会有好处吗？只是想知道，谢谢…一个好处是，如果两个图像都已呈现为

标记，那么浏览器将继续在页面加载时下载大图像。这将防止鼠标在上面抖动，因为图像已经加载。谢谢你提供的信息，大卫。尽管我会坚持上面的方法，所以我不必在页面上更改任何其他内容，但我可能会继续使用您和Gadde提到的方法，因为它将有助于避免您提到的鼠标抖动。我希望页面上的内容保持一致，但是，在这种情况下，严格使用HTML而不是JavaScript会有好处吗？只是想知道，谢谢…一个好处是，如果两个图像都已呈现为

标记，那么浏览器将继续在页面加载时下载大图像。这将防止鼠标在上面抖动，因为图像已经加载。谢谢你提供的信息，大卫。尽管我会坚持上面的方法，这样我就不必在页面上更改任何其他内容，但我可能会继续使用您&Gadde提到的方法，因为它将有助于避免您提到的鼠标抖动。谢谢您，Gadde-我猜这与@David试图传达给我的内容非常相似。还有一个问题：这样做比使用JavaScript有好处吗？？我试图保持一致性，讨厌改变所有已经做过的事情！这是唯一一个需要成为不同图像的图像…您正在HTML本身中使用javscipt。因此，在函数中使用它并没有什么区别。CSS是一个完全不同的东西。性能因为在html中使用js或单独使用js不会有很大的不同function@MarsOne我在哪里使用了JavaScript？谢谢你，Gadde-我猜这与@David试图传达给我的内容非常相似。还有一个问题：这样做比使用JavaScript有好处吗？？我在找康西斯