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.
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.
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.