ReactJS: Circle

This entry is part 25 of 35 in the series React JS

See the Pen React: Circle by Pete (@peterbenoit) on CodePen.0

var Circle = React.createClass({

  styler: {
    width: "100px",
    height: "100px",
    mozBorderRadius: "50%",
    webkitBorderRadius: "50%",
    borderRadius: "50%",
    background: "red"
  },

  render: function() {
    return (
      <div style = {this.styler}></div>
    );
  }
});
 
React.render(
  <Circle />, 
  document.getElementById('mount-point'));

JavaFX: Using Label with Graphics

This entry is part 14 of 55 in the series JavaFX

As mentioned earlier, Label class is very similar to Text class and Label allows us to create a more expressive text display.

For example, we can put a graphics easily on the top, left etc of a jpeg file.

Label class provides us a setGraphics method and it also allows us to place the text on the different position around the graphics.

In the example below, I have put the label above the graphics by using

lb.setContentDisplay(ContentDisplay.BOTTOM);

Take note also how I have accessed the jpg file using getResourceasStream method.  I have put the cloud.jpg in the same directory as javafxapplication13.java.

Label With Graphics
package javafxapplication13;

import javafx.application.Application;
import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.control.ContentDisplay;
import javafx.scene.control.Label;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.StackPane;
import javafx.scene.paint.Color;
import javafx.scene.text.Font;

public class JavaFXApplication13 extends Application {

    @Override
    public void start(Stage stage) {

        stage.setTitle("JavaFX Program!");

        StackPane stackpane = new StackPane();

        Scene scene = new Scene(stackpane, 500, 300);
        stage.setScene(scene);

        Label lb = new Label("Stay Calm And Keep Learning");
        Image image = new Image(getClass().getResourceAsStream("cloud.jpg"));
        lb.setGraphic(new ImageView(image));
        lb.setFont(Font.font("Cambria", 24));
        lb.setContentDisplay(ContentDisplay.BOTTOM);
        lb.setTextFill(Color.web("#0076a3"));

        stackpane.getChildren().add(lb);

        stage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }

}

label

 

HTML: Creating graphical hyperlink

This entry is part 34 of 34 in the series HTML

To create a hyperlink on an image, we place the <img> tag in an <a> tag.

You can refer to an earlier example where we have created a hyperlink to a webpage.

Codecrawl.com-Image

<!DOCTYPE html>
<html>
<head lang='en'>     
    <meta charset='UTF-8'>
    <title>Codecrawl.com-Image</title>
</head>
<body>

<a href='http://en.wikipedia.org/wiki/Ushuaia' title='Ushuaia'><img src='//codecrawl.com/code/images/ushuaia1.jpg'></a>

</body>
</html>

Just in case that the image is not loaded for some reason, we could put an alternate text on the image.

<img src='//codecrawl.com/code/images/ushuaia1.jpg' alt='Ushuaia'>

HTML: Understanding graphic size and resolution

This entry is part 28 of 34 in the series HTML

A graphic image’s resolution is the number of unique dots, or pixels, it contains.

Resolution is expressed in width and height, always in that order.

For example, an image that is 800 x 600 is 800 pixels wide and 600 pixels tall.

A graphic’s file size–how many bytes the file will take up on disk–has a direct relationship to its resolution.  The more pixels in a graphic, the larger the file.