Draw line between to elements on hover

[Gniew]

Let's suppose I have a hundred images on a page.

<a href="page.php?x=1895&y=2015"><img style='background:url(images/tile_2.png)' class='xyz' data-alt-src='images/X.png' data-name='   ' src="images/tile_2.png" /></a>

When on hover, the image URL is changed to the alt-src and the data-name is then displayed in an TD.

 

Now, suppose I wanted to alter the IMG tag to become something similar to:

<img style='background:url(images/tile_2.png)' class='xyz' data-alt-src='images/X.png' data-name='   ' data-connection='2' data-id='15' data-lineColor='#005500' src="images/tile_2.png" />

I'd then want to draw a straight line in the lineColor attribute connecting the above image to the image(s) that contain the same data-connection attribute.

 

Or, I could always assign the images an x, y coord system and reference them as data-connectionX = '15' data-connectionY='16' data-x='19' data-y='25' and have it draw the lines to the images that contain the same data-connectionX and data-connectionY attributes.

 

Cannot figure out how to do that...

 

I tried using HTML5 canvas, but when I tried to even draw a line on the canvas while shifting HTML (the images) over the canvas, the images covered the canvas and line drawn. When I tried to change the z-index of the canvas, it worked except that the canvas covered over the HTML and made the existing on-hover image changes not work, as well I needed to define the absolute locations for the start and end points of the line, and with my code being dynamic and able to be changed by altering GET variables, I need something that calculates the location of the images automatically.

I've found regular JS examples of drawing lines, but they all rely on knowing the exact points to draw from...is there any way to do this by having the exact points be calculated by the JS and not needing to be hard-coded in? With the on-hover displaying the drawn lines?