GWT图像按钮

我正在从PNG图标创建一个图像按钮，我需要对按钮（但不是按钮效果）有一种感觉，当用户单击图像时，会出现一个虚线方块（如选择）以便产生按钮被单击的效果。有什么想法吗？

类似于GWT中的内容：

Hyperlink link = new Hyperlink();
Image image = new Image(imageUrl);
...
link.getElement().appendChild(image.getElement());
link.setStyleName("imgBtnLink");

添加/设置CSS样式：

.imgBtnLink:active {
   border-style:dashed;
}

---

旧的JSFIDLE示例：

您可以在ClickEvent处理程序中向元素添加样式表吗？（addStyleDependentName）

---

或者，按钮可能有用吗？

您可以创建自己的小部件，我有这个

public class ImageButton extends Button {

    public ImageButton() {
        super();
    }

    public void setImgSrc(String imgSrc) {
        Image img = new Image(imgSrc);
        String definedStyles = img.getElement().getAttribute("style");
        img.getElement().setAttribute("style",definedStyles);
        img.getElement().getStyle().setVerticalAlign(VerticalAlign.MIDDLE);
        DOM.insertBefore(getElement(), img.getElement(), DOM.getFirstChild(getElement()));
    }

    @Override
    public void setText(String text) {
        Element span = DOM.createElement("span");
        span.setInnerText(text);

        span.getStyle().setPaddingLeft(5, Unit.PX);
        span.getStyle().setPaddingRight(3, Unit.PX);
        span.getStyle().setVerticalAlign(VerticalAlign.MIDDLE);
        span.getStyle().setColor("black");

        span.setAttribute("class", "arial12R6D6D6D");
        DOM.insertChild(getElement(), span, 0);
    }
}

与CSS样式是合适的

ToggleButton button = new ToggleButton();
button.setStyleName("toggle-button");
...

CSS:

---

我创建了一个简单的自定义小部件类，它使用CSS和事件来显示自定义按钮：

活动： view.getContent（）.add（新建图像按钮（resource.comment（）、resource.search（）、resource.chechCircle（）、new ClickCallback（））{ 公共void onClick（）{ Window.alert（“单击！”）； } }));

我使用UiBinder/Composite来控制布局、css和事件。“ClickCallback”只是一个带有一个onClick方法的自定义接口

UiBinder文件如下所示：

---

Css在悬停时显示一个边框，MouseOverMouseOut可以与onClick在瞬间更改图像时交换相同的图像。可能会有一些想法

是的，这与我需要的点击效果相同，如何将其应用于GWT？谢谢，但是这种效果似乎不适用于GWT调试模式和chrome。@例如，Munawar，您提供的代码适用于GWT的内置按钮。我使用PNG图标作为按钮来保持透明度。实际上，这个类/小部件用于在gwt按钮（图像+文本）上显示图像。。若你们只是想用你们的.png作为按钮，你们可以把它放在css中作为背景，然后把那个类应用到按钮上。类似于uiBinder@Daniel，谢谢，但是您的方法是从css添加图像的url？新建切换按钮（图像向上图像，图像向下图像）

.toggle-button {
    outline: none;
    border: none;
    margin: 3px; /* border size */
    background: transparent url(../img/toggle-button.jpg);
}

.toggle-button-down, .toogle-button-down-hovering {
    margin: 0;
    border: 3px #469 dashed; /* margin size */
}