2

有一个图像，当我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功能。

有人可以帮忙吗？

提前致谢。

4

1 回答 1

2

当我将图像映射添加到图像对话框时，我会在作者模式下输出以下内容：

<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, the<map>和 the<image>都是通过drawOut()com.day.cq.wcm.foundation.Image 的方法渲染出来的。

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

  1. 覆盖图像组件
  2. 修改您的 JSP ( apps/foundation/components/image/image.jsp) 版本以根据需要输出地图、href 和图像（${properties.imageMap}用于地图/链接和${properties.fileReference}图像参考）
  3. 编写一些 CSS/JS 以在悬停时从 href 覆盖您的图像。
于 2013-10-14T14:53:36.000 回答