aem - 如何在Adobe Cq5中自定义现有的图像组件( map /区域功能)？

Question

当我将鼠标悬停在图像的特定区域上时，就会出现图像。我想在 CQ5 中显示另一张图像。现在我已经使用 map ，区域，坐标概念实现了这一点，onmouseover()函数我已经更改了图像。我从用户的对话框中获得了以下内容。 1)悬停时需要出现的图像 2)区域坐标。

我的问题是，我想避免从用户那里获取坐标。 默认图像组件中存在相同的 map 功能，我应该去哪里自定义组件，以便我可以添加额外的文本字段该组件仅获取需要在悬停时更改的图像路径，并且我还想添加鼠标悬停功能。

有人可以帮忙吗？

提前致谢。

Answer 1

当我将图像映射添加到图像对话框时，我在创作模式下得到以下输出:

<div class="genericImage cq-element-par_47image" id="cq-gen25">
    <img title="Triangle - Equilateral" usemap="#map_X" src="image">
    <map name="map_X" id="cq-gen117">
        <area shape="rect" coords="25,34,209,151" href="/path.html">
    </map>
</div>

访问/libs/foundation/components/image/image.jsp ，<map>和 <image>全部由 drawOut() 渲染出来com.day.cq.wcm.foundation.Image 的方法。

如果您想更改 map 的输出方式，您需要用您自己的代码替换此方法。 map 本身的详细信息作为名为 imageMap 的常规属性保存在图像节点上。 ，所以很有可能:

1. 覆盖图像组件
2. 修改您的 JSP 版本 ( apps/foundation/components/image/image.jsp ) 以根据需要输出 map 、href 和图像(使用 ${properties.imageMap} 作为 map /链接，使用 ${properties.fileReference} 作为图像引用)
3. 编写一些 CSS/JS 以在悬停时覆盖 href 中的图像。