Embedded Flash content hover problem

Hi

I am creating Banner class that extends Embedded.

@SuppressWarnings(“serial”)
public class Banner extends Embedded implements ClickListener {

private String url;
private String type;

public Banner(String type) {
	super();
	this.type = type;

	BannerManager bannerManager = new DefaultBannerManager();
	BannerInfo info = bannerManager.getBannerInfo(type);
	
	String fileName = info.getFileName();
	if(fileName.endsWith(".swf")) {
                setMimeType("application/x-shockwave-flash");
            }
	this.url = info.getUrl();
	
	Resource bannerResource = new ThemeResource("banners/" + fileName);
	this.setSource(bannerResource);
	
	this.addListener(this);
	this.addStyleName("banner");
	this.setDescription(info.getDescription());
}

@Override
public void click(ClickEvent event) {
    if(event.getSource() == this) {
        AccessLogHelper.addAccessLog(getApplication(), type);
        getWindow().open(new ExternalResource(url), "_blank");
    }
}

}

Following is my theme style:

.banner:hover {
cursor: pointer;
}

This code displays image or flash files very well. But, when mouse pointer is moving over the flash content, mouse cursor is not changed. For image file it is ok. How to solve this problem? Please, help me.

When hovering the mouse cursor over flash content, the control over the mouse cursor is given to the flash movie and normal css will not apply.

You basically have two options here, either change the cursor in the flash movie itself or add a cover on top of the flash movie by using for instance a csslayout or absolutelayout.

Hi John.

Thank you very much for your reply. I could it.
Is it right?

        AbsoluteLayout right = new AbsoluteLayout();
    Banner banner = new Banner("intro.swf");
    banner.setWidth("250px");
    banner.setHeight("100px");
    Panel panel = new Panel();
    
    right.setHeight("100%");
    right.setWidth("250px");

    right.addComponent(banner, "left:0px; top:0px");
    
    panel.setStyleName(Reindeer.PANEL_LIGHT);
    panel.setWidth("250px");
    panel.setHeight("100px");
    panel.addStyleName("banner");
    
    right.addComponent(panel, "left:0px; top:0px");