Ligando duas DIVs com um conector sem HTML5

Os gráficos e diagramas estão ganhando muita importância nas páginas Web. Estamos em um mundo essencialmente visual.

Criar retângulos, boxes e regiões retangulares com DIVs já é uma rotina nas páginas de Internet. No entanto, um aspecto do uso destas DIVs se torna um problema de geometria: a conexão com linhas. Como é que, sem o HTML5, podemos desenhar linhas de conexão ?

O diagrama do problema

Observe a figura a seguir. Ela mostra as grandezas geométricas envolvidas neste problema.

Início da página HTML:

* 1 * - A DIV da classe Conecta é um conector, ou seja, um traço. No Internet Explorer, para que o traço não acabe se tornando um retângulo com alguma altura, é preciso definir o tamanho do fonte como 1 pixel;

* 2 * - Com o mesmo intuito de *1*, garantimos que o traço não terá altura, anulando a altura da linha.

Scripts

Função javascript que cria uma DIV programaticamente (criaDiv):

É preciso usar a biblioteca jquery, que torna todas as tarefas de programação mais fáceis em torno da ponte entre as TAGS e o código javascript.

Função javascript que cria um conector - Parte I

Função javascript que cria um conector - Parte II

Função javascript que cria um conector - Parte III

O código HTML produzido é colocado dentro da DIV cujo Id é "main".

Finalização das funções

Em se tratando  de um javascript, temos que garantir que o HTML da página foi todo lido:

NÃO ESQUEÇA DE FECHAR A ÚLTIMA FUNÇÃO ABERTA COM "}".