マウスオーバー時に徐々に大きくなる画像に、マウスカーソルが画像の外にでたときに徐々に元のサイズに戻るという機能を付けてみた。ただし、元のサイズに戻ってるときにマウスカーソルがまた画像に入ることを考えていない。また、環境によってなのか、マウスアウト時に元のサイズに戻らないことがある、原因不明。そのうち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); } }