マイペースなプログラミング日記

DTMやプログラミングにお熱なd-kamiがマイペースに書くブログ

マウスオーバー時に徐々に大きくなる画像

マウスカーソルが画像の上に乗っているときに徐々に大きくなる画像を作ってみた。問題はマウスアウト時に元のサイズに戻らないことか。徐々に元のサイズに戻したいので、タイマが必要そう。あとAttributeModifierを追加しっ放しでいいのだろうか?古い奴はremoveした方がいいのかな?

import org.apache.wicket.markup.html.WebPage;
import org.apache.wicket.markup.html.image.Image;
import org.apache.wicket.ResourceReference;
import org.apache.wicket.AttributeModifier;
import org.apache.wicket.model.Model;

import org.apache.wicket.ajax.AjaxEventBehavior;
import org.apache.wicket.ajax.AjaxRequestTarget;

public class ExpandImage extends WebPage {

    int size = 64;
    int limit = 96;

    public ExpandImage() {
        ResourceReference resource
                = new ResourceReference(ExpandImage.class, "img/image.png");
        
        final Image image = new Image("image", resource);
        image.setOutputMarkupId(true);

        image.add(new AjaxEventBehavior("onmouseover") {
            @Override
            protected void onEvent(AjaxRequestTarget target) {
                if(size < limit){
                    size++;
                }

                AttributeModifier style = new AttributeModifier(
                        "style", true,
                        new Model("width:" + size + "px; height: " + size + "px")
                );
                
                image.add(style);
                target.addComponent(image);
            }
        });

        add(image);
    }
}