Flex图像鼠标悬停

发布于 2024-11-28 21:41:07 字数 414 浏览 2 评论 0原文

我有下一个代码显示图像，当鼠标悬停时更改它。

  <mx:Image source="{ConfigApp.getResourcesPath()}/img.jpg" id="imgOne"   
  mouseOver="imgOne.source=ConfigApp.getResourcesPath()+'/img_over.jpg'"
  mouseOut="imgOne.source=ConfigApp.getResourcesPath()+'/img.jpg'"/>

我有两个问题：

第一：如果我将鼠标快速移过图像，有时会出现 mouseOver 图像的图像状态（不检测 mouseOut 事件）。

第二：在鼠标悬停的那一刻，有几毫秒没有任何图像，因此每次鼠标悬停时，它看起来都像白色闪光。

原文

I have the next code that show a image and when mouse is over change it.

  <mx:Image source="{ConfigApp.getResourcesPath()}/img.jpg" id="imgOne"   
  mouseOver="imgOne.source=ConfigApp.getResourcesPath()+'/img_over.jpg'"
  mouseOut="imgOne.source=ConfigApp.getResourcesPath()+'/img.jpg'"/>

I have 2 problems:

1st: If I pass fast with the mouse over the image, some times the image state with mouseOver image (don't detect the mouseOut event).

2nd: In the moment that mouse is over there are a few miliseconds when the aren't any image, so its looks like a white flash every time that mouse is over.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

与君绝 2024-12-05 21:41:07

第二期：
每次都会加载图像，在远程连接时这种闪光会变得更糟。相反，cahce 类中的图像并切换类引用。

[Embed(source="/assets/imageOver.png")]
public static const overImage:Class;
[Embed(source="/assets/img.png")]
public static const image:Class;

然后像这样切换它们......

<mx:Image source="{image}" id="imgOne"   
  mouseOver="imgOne.source=overImage"
  mouseOut="imgOne.source=image"/>

2nd issue:
Its loading the image each time, this flash will get worse when on a remote connection. instead, cahce the image in a class and switch the class reference.

[Embed(source="/assets/imageOver.png")]
public static const overImage:Class;
[Embed(source="/assets/img.png")]
public static const image:Class;

Then switch them like this...

<mx:Image source="{image}" id="imgOne"   
  mouseOver="imgOne.source=overImage"
  mouseOut="imgOne.source=image"/>

回复收藏 0 原文

软糖 2024-12-05 21:41:07

我宁愿做这样的事情，它解决了所有问题：

[Bindable] public var isOurMouse:Boolean = false;

<mx:Canvas>
    <mx:Image source="{ConfigApp.getResourcesPath()}/img.jpg"
        mouseOver="isOurMouse = true"
        mouseOut="isOurMouse = false"/>
    <mx:Image source="{ConfigApp.getResourcesPath()}/img_over.jpg"
        mouseEnabled="false" mouseChildren="false"
        visible="{isOurMouse}"/>
</mx:Canvas>

就这一点而言，如果您希望图像在重新加载时不闪烁，您应该有两个图像，一个在另一个上，其中背景图像仅在前景图像加载后才重新加载完成加载。实际上，您的图像闪烁，但您看不到它：

<mx:Canvas>
    <mx:Image id="imgBkg"/>
    <mx:Image id="imgFrg"
        source="{something}"
        complete="imgBkg.source = imgFrg.source"/>
</mx:Canvas>

I'd rather make something like this, it solves all the problems:

[Bindable] public var isOurMouse:Boolean = false;

<mx:Canvas>
    <mx:Image source="{ConfigApp.getResourcesPath()}/img.jpg"
        mouseOver="isOurMouse = true"
        mouseOut="isOurMouse = false"/>
    <mx:Image source="{ConfigApp.getResourcesPath()}/img_over.jpg"
        mouseEnabled="false" mouseChildren="false"
        visible="{isOurMouse}"/>
</mx:Canvas>

To the point, if you want your image not to blick on reload, you should have two images, one on another, where background one reloads only after the foreground one has completed loading. Actually, your image blicks, but you don't see it:

<mx:Canvas>
    <mx:Image id="imgBkg"/>
    <mx:Image id="imgFrg"
        source="{something}"
        complete="imgBkg.source = imgFrg.source"/>
</mx:Canvas>

回复收藏 0 原文

~没有更多了~