Question

当我hover在图像的特定区域时，有一个图像。我想在CQ5中显示另一张图片。现在我已经使用map,area,co-ordinates概念，onmouseover()函数实现了这一点，我已经改变了图像。我从用户的dialog获得了以下内容。 1）悬停时需要出现的图像 2）该地区的协调。

我的问题是，我想要来自用户的avoid getting the co-ordinates。 default image component中存在相同的地图功能，我应该在哪里和customize组件，以便我可以add an extra textfield在组件中获取所需的image path在悬停时更改，我也想添加mouseover功能。

有人可以帮忙吗？

提前致谢。

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>全部由com.day.cq.wcm.foundation.Image的drawOut()方法呈现。

如果要更改地图的输出方式，则需要使用自己的代码替换此方法。虽然地图本身的详细信息在图像节点上保存为名为imageMap的常规属性，因此很可能：

覆盖图像组件
修改您的JSP版本（apps/foundation/components/image/image.jsp）以根据需要输出地图，href和图片（使用${properties.imageMap}作为地图/链接，${properties.fileReference}作为地图/链接图片参考）
写一些CSS / JS来覆盖悬停时href的图像。

如何在Adobe Cq5中自定义现有的图像组件（地图/区域功能）？

1 个答案: