Подсказка к элементу Image внутри RichEditableText - PullRequest
Новая
       21

Подсказка к элементу Image внутри RichEditableText

0 голосов
/ 20 августа 2011

У меня есть следующее: 

<s:RichEditableText>        
    <s:textFlow>
        <s:TextFlow>
             <s:p><s:a click="linkelement1_clickHandler(event);"><s:img id="ccIMG" source="{imgCls}"></s:img></s:a></s:p>
       </s:TextFlow>
    </s:textFlow>
</s:RichEditableText>

Я хочу отобразить всплывающую подсказку для элемента img - не понял этого - идеи кто-нибудь?

спасибо!

MCE

1 Ответ

0 голосов
/ 21 августа 2011

Проблема, с которой вы сталкиваетесь, заключается в том, что изображение не будет отправлять регулярные события, как это делают другие элементы в списке отображения. Точнее, он не будет отправлять события MOUSE_OVER или ROLL_OVER, чтобы вы могли прослушать и отобразить всплывающую подсказку.

Таким образом, вам нужно будет прослушивать эти события во всем RichEditableText и выполнить некоторое тестирование попаданий, чтобы определить, находится ли мышь над изображением или нет.

Предположим, у вас есть какой-то текстовый поток, подобный этому: 

<s:RichEditableText width="100%" height="100%" mouseOver="toggleTooltip()">
    <s:textFlow>
        <s:TextFlow>
            <s:p>
                <s:span>Some text before</s:span>
                <s:img id="myImg" source="myImg.png" />
                <s:span>Some text after</s:span>
            </s:p>
        </s:TextFlow>
    </s:textFlow>
</s:RichEditableText>

И вы слушаете события mouseOver для всего текстового компонента.

Затем, чтобы проверить, находится ли мышь над вашим изображением, реализуйте обработчик mouseOver: 

private function toggleTooltip():void {
    var graphic:DisplayObject = myImg.graphic;
    var anchor:Point = graphic.localToGlobal(new Point(0, 0));

    if (mouseX >= anchor.x && mouseX <= anchor.x + graphic.width &&
        mouseY >= anchor.y && mouseY <= anchor.y + graphic.height) 
    {
        trace('show tooltip');
    }
    else {
        trace('hide tooltip');
    }
}
...