javascript - Draw a line between two elements with hover -

i've seen number of examples on how this, none of them need done.

what want done, when image (it wrapped in individual div if needed) hovered over, draws line center of image center of image (or potentially center of first image center of several other images), , on mouse out, returns original state.

i tried using html5 canvas, when tried draw line on canvas while shifting html (the images) on canvas, images covered canvas , line drawn. when tried change z-index of canvas, worked except canvas covered on html , made existing on-hover image changes not work.

i've found regular js examples of drawing lines, rely on knowing exact points draw from...is there way having exact points calculated js , not needing hard-coded in? on-hover displaying drawn lines?

as unconventional alternative can give this library try. it's pre-html5-canvas oldie-but-still-goodie. has ability turn div pseudo "canvas", can have html elements inside of div , kinds of drawing between them.

for example if define "canvas" this:

<div id="mycanvas" style="position: relative;"></div> 

you can init library, set color, stroke size , draw line this:

var jg = new jsgraphics("mycanvas");  jg.setcolor("#0000ff"); jg.setstroke(2); jg.drawline(x1, y1, x2, y2);  jg.paint(); 

it ain't html5 canvas, it's "canvas" can place dom elements directly inside of , draw there well.

here's small demo: http://jsfiddle.net/rs5ey/1/ wave mouse on top image.