Getting started

The connector's ends

<html>
  <head>
    <script type="text/javascript" src="../js-graph-it.js"></script>
    <link rel="stylesheet" type="text/css" href="../js-graph-it.css">
    <style>
      .block { position: absolute; }
    </style>
  </head>
  <body onload="initPageObjects();">
    <div class="canvas" id="mainCanvas"
      style="width: 350px; height: 250px; border: 1px solid black;">
      <h1 class="block draggable" id="h1_block"
        style="left: 10px; top: 10px;">
          h1 block
      </h1>
      <h2 class="block draggable" id="h2_block"
        style="left: 200px; top: 100px;">
        h2 block
      </h2>
      <div class="connector h1_block h2_block">
        <img src="arrow.gif" class="connector-start">
        <img src="arrow.gif" class="connector-end">
      </div>
    </div>
  </body>
</html>

It is possible to add an image at each end of a connector to give it an "arrow" style. To do this, we first have to create 5 images because there is no way to rotate an image using javascript.

The first image must be the original one, this is needed because otherwise the browser can hang searching for it. The other 4 images must be the ones to use in each of the four directions and the 4 files must be named as the original image with the suffixes "_u", "_d", "_l", "_r" standing for "up", "down", "left" and "right" appended to the file name (not the extension!).

The image we will use in this sample is named "arrow.gif", then the four files to be provided must be:
  1. arrow.gif
  2. arrow_u.gif
  3. arrow_d.gif
  4. arrow_l.gif
  5. arrow_r.gif
You can copy these files from this tutorial.

Ones the image files have been provided, we can add the connector's ends by adding two img elements.

The source of the images must be the original image file.

The connector-start and connector-end classes indicate that the element is to be added at the start or the end of the connector, respectively.

« previous
next »