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

问题描述：

有一个图像，当我hover在图像的特定区域。我想在CQ5中显示另一张图片。现在我已经实现了这个使用map,area,co-ordinates概念，onmouseover()函数我已经改变了图像。我从用户的dialog得到了以下内容。 1）需要在徘徊时出现的图像 2）该区域的坐标。如何在Adobe Cq5中自定义现有的图像组件（地图/区域功能）？

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

有人可以帮忙吗？

在此先感谢。

你想知道如何编辑对话框来添加文本字段？你试过什么了？ – anotherdave

@anotherdave：在现有的图像组件中，可以使用地图功能。我想在该地图功能选项卡中添加一个文本框。 jsp文件在哪里自定义地图功能？ – Pbk1303

@anotherdave：现在地图功能允许我只为该区域添加一个href链接。我想添加一个额外的可以添加的区域，图像路径，当我将鼠标悬停在每个特定区域时，必须显示该路径。 – Pbk1303

答

当我添加图像映射到图像对话框中，我得到以下以作者模式输出：

<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的drawOut()方法呈现出来.day.cq.wcm.foundation.Image。

如果你想改变地图的输出方式，你需要用你自己的代码替换这个方法。地图本身的细节，虽然被保存为名为imageMap常规属性的图像节点上，所以有它很可能到：

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

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

相关推荐