/* Connect v 1.0 Copyright (C) 2001 John Weir www.smokinggun.com This code is free for use. If please include the copyright. */ //mouse cordinate positions mX1 = mX2 = mY1 = mY2 = 0; function drawLine(x1,y1,x2,y2,container) { newImage = document.createElement("img"); newImage.src = "line.php?x1="+x1+"&x2="+x2+"&y1="+y1+"&y2="+y2; m = (x1-x2)/(y1-y2); if (x2 > x1) newImage.style.left = x1+"px"; else newImage.style.left = x2+"px"; if (y2 < y1) newImage.style.top = y2+"px"; else newImage.style.top = y1+"px"; newImage.style.position = "absolute"; container.appendChild(newImage); } function objectClass(HTML,container,x,y) { this.x = x; this.y = y; this.HTML = HTML; this.container = document.getElementById(container); this.draw = drawObject; this.position = positionObject; this.connect = connectObject; this.connectPoint = connectPoint; } function drawObject() { var nObj = document.createElement("div"); this.obj = nObj; nObj.innerHTML = this.HTML // you can also assign the styles through CSS, see the additional style // below for #engergy_div DIV {} // that selector will affect all divs inside the engergy_div nObj.style.position = "absolute"; nObj.style.padding = "3px"; nObj.style.zIndex = "10"; nObj.style.left = this.x+"px"; nObj.style.top = this.y+"px"; this.container.appendChild(nObj); } function positionObject() { this.obj.style.left = this.x+"px"; this.obj.style.top = this.y+"px"; } function connectObject(obj) { drawLine(this.x,this.y,obj.x,obj.y,this.container); } function connectPoint(x,y) { drawLine(this.x,this.y,x,y,this.container); } function createNewObjects(HTML,container,x,y) { var nObj = new objectClass(HTML,container,x,y); nObj.draw(); nObj.position(); return nObj; } function init() { // objThumb = createNewObjects("Thumb","hand_div",250,220); objThumb.connectPoint(60,190); objIndex = createNewObjects("Index Finger","hand_div",250,180); objIndex.connectPoint(70,50); objMid= createNewObjects("Middle Finger","hand_div",250,140); objMid.connectPoint(120,50); objHmm= createNewObjects("What is this finger?","hand_div",250,100); objHmm.connectPoint(150,50); objPinky= createNewObjects("Pinky","hand_div",250,60); objPinky.connectPoint(200,50); //define objects objCalifornia = createNewObjects("California","energy_div",50,60); objEnergy = createNewObjects("Energy","energy_div",100,200); objEnron = createNewObjects("Enron","energy_div",150,55); objTexas = createNewObjects("Texas","energy_div",25,160); objWhiteHouse = createNewObjects("The White House","energy_div",175,150); //make connections objWhiteHouse.connect(objCalifornia); objWhiteHouse.connect(objTexas); objWhiteHouse.connect(objEnergy); objTexas.connect(objEnergy); objTexas.connect(objCalifornia); objEnron.connect(objTexas); objEnron.connect(objEnergy); objEnron.connect(objWhiteHouse); objCalifornia.connect(objEnergy); objCalifornia.connect(objEnron); //define demo objects objDemos = createNewObjects("Demos","demos_div",80,10); objDemos_Layout = createNewObjects("Layout","demos_div",0,50); objDemos_connect = createNewObjects("connect","demos_div",30,80); objDemos_scale = createNewObjects("scale","demos_div",30,100); objDemos_line = createNewObjects("line drawing","demos_div",30,120); objDemos_size = createNewObjects("size text","demos_div",30,140); objDemos_Interfaces = createNewObjects("Interfaces","demos_div",120,50); objDemos_Clippings = createNewObjects("Clippings","demos_div",150,80); objDemos_Methods = createNewObjects("Methods","demos_div",240,50); objDemos_anchors = createNewObjects("anchors","demos_div",270,80); objDemos_sg_swapNode = createNewObjects("sg_swapNode","demos_div",270,100); objDemos.connect(objDemos_Layout); objDemos.connect(objDemos_Interfaces); objDemos.connect(objDemos_Methods); objDemos_Layout.connect(objDemos_connect); objDemos_Layout.connect(objDemos_scale); objDemos_Layout.connect(objDemos_line); objDemos_Layout.connect(objDemos_size); objDemos_Interfaces.connect(objDemos_Clippings); objDemos_Methods.connect(objDemos_anchors); objDemos_Methods.connect(objDemos_sg_swapNode); windowOnload(); } windowOnload = window.onload; window.onload = init;

This is a primitive solution to connect HTML text to images, or visually connect text objects to text objects. This is not final. Additional methods need to be added to allow for dragging and user initiated linking.

Info | Source
Info

The idea for this came to me when looking at the poster for Being John Malkovich. I haven't had a chance to document this much yet, sorry. - jw

The lines are generated on the server and placed via CSS. See demo line draw for another example of this.

Syntax

Text: String to be used as the label. It can be either text or HTML.

Container_ID: The id of the DIV or other element to hold this object.

x,y: The pixel position of the object.

Creating an object:
obA = createNewObjects("Text",Container_ID,x,y);

Connecting one object to another:
objA.connect(objB);

Connecting an object to a point:
obj.connectPoint(x,y);

Bugs

There is a bug with drawing straight lines. I believe this to be a problem with the GD(graphics library) installed on this server since the script has performed better on other servers.

PHP Source
Below is the PHP source to generate the gif line. View the HTML source for the javascript code.
HTML; show_source("line.php"); echo <<
HTML; echo $public_footer; ?>