如何在某个 XY 坐标上缩放鼠标悬停图像？答案

【问题标题】：How to zoom image on mouseover at some XY coordinate?如何在某个 XY 坐标上缩放鼠标悬停图像？
【发布时间】：2010-04-05 05:18:25
【问题描述】：

我显示一组图像（小）。当鼠标悬停事件发生在图像上时，我需要在某个 XY 坐标处显示较大的图像（300*300），而 mousout 较大的图像必须消失。请给出一些解决方案。

【问题讨论】：

mouseover 是一个只能在每个 Javascript 下挂钩的事件。由于 Javascript 在客户端运行，它看不到任何 JSF 源代码。相反，它只看到由 JSF 生成的 HTML 源代码的 HTML DOM 树。换句话说，JSF 在这个问题上是完全不相关的。为了让您的问题获得更广泛的受众（HTML/Javascript），我强烈建议您根据 JSF 生成的 HTML 输出来编辑、重新标记和重新制定问题。从 HTML <img> 元素和 Javascript 函数开始，一旦你让它工作，将它移植回 JSF 源代码。

【解决方案1】：

因此，您实际上想要一个image map。由于我从未使用过它，因此我无法从头顶说出详细信息，但是该链接应该可以进一步帮助您。例如，您可以使用HTML <map> and <area> elements，或者继续使用pure CSS 方法。

没有可以表示<map> 和<area> 元素的标准JSF 组件。然而，Sun JSF 教程（巧合）涵盖了 custom component example，您可以使用纯 JSF 来表示它们。

【讨论】：

你好 BalusC，你给的链接改天会有用。但我的要求和cardsdirect.com/petite-chrsitmas-cards.aspx中的完全一样。我需要在固定位置为所有人显示较大的图像，而不是在小图像附近显示较大的图像，并且它应该通过隐藏该位置的组件而位于顶部。我希望解释清楚..