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

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

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

マウスオーバー時に徐々に大きくなる画像に、マウスカーソルが画像の外にでたときに徐々に元のサイズに戻るという機能を付けてみた。ただし、元のサイズに戻ってるときにマウスカーソルがまた画像に入ることを考えていない。また、環境によってなのか、マウスアウト時に元のサイズに戻らないことがある、原因不明。そのうちImageを継承したコンポーネントにする予定

package image;

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.util.time.Duration;

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

public class ExpandImage extends WebPage {

    int minimumSize = 64;
    int size = minimumSize;
    int maximumSize = 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 < maximumSize){
                    size += 2;
                }

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

        image.add(new AjaxEventBehavior("onmouseout"){
           @Override
           protected void onEvent(AjaxRequestTarget arg0){
               image.add(new AbstractAjaxTimerBehavior(Duration.milliseconds(10)){
                   @Override
                   protected void onTimer(AjaxRequestTarget target){
                       size -= 2;
                       if(size <= minimumSize){
                           size = minimumSize;
                           stop();
                       }

                       AttributeModifier style = new AttributeModifier(
                               "style", true,
                               new Model("width:" + size + "px; height: " + size + "px")
                       );

                       image.add(style);
                       target.addComponent(image);
                   }
               });

               arg0.addComponent(image);
           }
        });

        add(image);
    }
}