2

hover画像の特定の領域に私がいるとき、画像があります。で別の画像を表示したいCQ5。今、私はイメージを変更したmap,area,co-ordinatesコンセプト、機能を使用してこれを達成しました。ユーザー様からonmouseover()以下の物を頂きました。dialog1) ホバーしたときに表示する必要がある画像 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、<map>および<image>はすべて com.day.cq.wcm.foundation.Image のメソッドによってレンダリングされますdrawOut()。

マップの出力方法を変更したい場合は、このメソッドを独自のコードに置き換える必要があります。ただし、マップ自体の詳細は、 という通常のプロパティとしてイメージ ノードに保存されるimageMapため、次のことが可能です。

  1. 画像コンポーネントをオーバーレイする
  2. JSP ( apps/foundation/components/image/image.jsp) のバージョンを変更して、必要に応じてマップ、href、および画像を出力します (${properties.imageMap}マップ/リンクおよび${properties.fileReference}画像参照に使用)。
  3. ホバー時に href から画像をオーバーレイする CSS/JS を記述します。
于 2013-10-14T14:53:36.000 に答える