Images

A WImage is a widget that displays an image. The image may be specified either as a URL, or may be dynamically generated by a WResource.

You can set an alternate text using the method setAlternateText(). The alternate text should provide a fallback for browsers that do not display an image, and are also important for accessibility. If no sensible fallback text can be provided, an empty text is preferred over nonsense.

You may listen to events by attaching event listeners to signals such as clicked(). Since mouse events pass the coordinates through a WMouseEvent object, it is possible to react to clicks in specific parts of the image.

Example
Wt logo
source 
  void Image() {
    WContainerWidget container = new WContainerWidget();
    WImage image = new WImage(new WLink("icons/wt.png"), (WContainerWidget) container);
    image.setAlternateText("Wt logo");
    final WText out = new WText((WContainerWidget) container);
    out.setMargin(new WLength(10), EnumSet.of(Side.Left));
    image
        .clicked()
        .addListener(
            this,
            (WMouseEvent e) -> {
              out.setText(
                  "You clicked the Wt logo at ("
                      + String.valueOf(e.getWidget().x)
                      + ","
                      + String.valueOf(e.getWidget().y)
                      + ").");
            });
  }

Image also supports a more structural approach to listening for events depending on the image location. One can define interactive areas on the image using addArea(), which also allows to define a custom tool tip (using WAbstractArea.setToolTip()) or a different cursor image (using WAbstractArea.setCursor) for a certain image area.

Example
Sintel trailer
source 
  void ImageArea() {
    WContainerWidget container = new WContainerWidget();
    WImage image = new WImage(new WLink("pics/sintel_trailer.jpg"), (WContainerWidget) container);
    image.setAlternateText("Sintel trailer");
    new WBreak((WContainerWidget) container);
    final WText out = new WText((WContainerWidget) container);
    WCircleArea circlePtr = new WCircleArea(427, 149, 58);
    WCircleArea circle = circlePtr;
    circle.setToolTip("tree");
    circle.setCursor(Cursor.Cross);
    image.addArea(circlePtr);
    WRectArea rectPtr = new WRectArea(294, 226, 265, 41);
    WRectArea rect = rectPtr;
    rect.setToolTip("title");
    rect.setCursor(Cursor.Cross);
    image.addArea(rectPtr);
    WPolygonArea polygonPtr = new WPolygonArea();
    WPolygonArea polygon = polygonPtr;
    List<WPoint> points = new ArrayList<WPoint>();
    points.add(new WPoint(92, 330));
    points.add(new WPoint(66, 261));
    points.add(new WPoint(122, 176));
    points.add(new WPoint(143, 33));
    points.add(new WPoint(164, 33));
    points.add(new WPoint(157, 88));
    points.add(new WPoint(210, 90));
    points.add(new WPoint(263, 264));
    points.add(new WPoint(228, 330));
    points.add(new WPoint(92, 330));
    polygon.setPoints(points);
    polygon.setToolTip("person");
    polygon.setCursor(Cursor.Cross);
    image.addArea(polygonPtr);
    circle
        .clicked()
        .addListener(
            this,
            () -> {
              out.setText("You clicked the tree.");
            });
    rect.clicked()
        .addListener(
            this,
            () -> {
              out.setText("You clicked the title.");
            });
    polygon
        .clicked()
        .addListener(
            this,
            () -> {
              out.setText("You clicked the person.");
            });
    image
        .mouseMoved()
        .addListener(
            this,
            (WMouseEvent e) -> {
              out.setText(
                  "You're pointing the background at ("
                      + String.valueOf(e.getWidget().x)
                      + ","
                      + String.valueOf(e.getWidget().y)
                      + ").");
            });
  }

In contrast to the image, which displays typically a static image resource, JWt are also includes several options for dynamically painted graphics.

WImage is an inline widget. The widget corresponds to the HTML <img> tag and doesn't provide styling. It can be styled using inline or external CSS as appropriate.

Top