Dashed line from one element to another (images version)

<script>
    jQuery(document).ready(function($) {
        function genererPointilles($E1, $E2, $parent, zIndex) {
            var borderWidth = 4;

            if (typeof($parent)=='undefined')
                var $parent = $('#ajax-content-wrap');
            if (typeof(zIndex)=='undefined')
                var zIndex = 10;

            var topMargin = $parent.offset().top;
            var leftMargin = $parent.offset().left;

            var Ax = $E1.offset().left+$E1.width()/2-leftMargin;
            var Ay = $E1.offset().top+$E1.height()-topMargin;

            var Bx = $E2.offset().left+$E2.width()/2-leftMargin;
            var By = $E2.offset().top-topMargin;

            if (Bx<Ax)
                var A2x = Math.round(Ax+(Bx-Ax)/2);
            else
                var A2x = Math.round(Ax-borderWidth/2);
            var A2y = Ay;
            var A2w = Math.round(Math.abs((Ax-Bx)/2+borderWidth/2));
            var A2h = Math.round(Math.abs((By-Ay)/2+borderWidth/2));

            if (Bx<Ax)
                var B2x = Math.round(Bx-borderWidth/2);
            else
                var B2x = Math.round(Bx+(Ax-Bx)/2);
            var B2y = Math.round(Ay+(By-Ay)/2-borderWidth/2);
            var B2w = Math.round(A2w+borderWidth/2);
            var B2h = Math.round(A2h+borderWidth/2);

            if (Math.abs(B2x-A2x)<10) {
                A2x = Math.round(A2x+(A2x-B2x)/2);
                B2x = A2x;
            }

            if (B2x<A2x) {
                var class1 = 'bottomright';
                var class2 = 'topleft';
            }
            else if (B2x>A2x) {
                var class1 = 'bottomleft';
                var class2 = 'topright';
            }
            else {
                var class1 = 'straight-1';
                var class2 = 'straight-2';
            }

            $parent.append('<div class="pointilles '+class1+'" style="left:'+A2x+'px;top:'+A2y+'px;width:'+A2w+'px;height:'+A2h+'px;z-index:'+zIndex+';"><div class="line line-1"></div><div class="line line-2"></div></div><div class="pointilles '+class2+'" style="left:'+B2x+'px;top:'+B2y+'px;width:'+B2w+'px;height:'+B2h+'px;z-index:'+zIndex+';"><div class="line line-1"></div><div class="line line-2"></div></div>');
        }

        function pointilles() {
            $('.pointilles').remove();
            genererPointilles($('.pointilles-bloc-1 .column-bg-overlay-wrap'), $('.pointilles-bloc-2'));
            genererPointilles($('.pointilles-bloc-2'), $('.pointilles-bloc-3'), $('.pointilles-wrapper-1'), 1);
            genererPointilles($('.pointilles-bloc-3'), $('.pointilles-bloc-4'), $('.pointilles-wrapper-2'), 1);
        }
        pointilles();
        $(window).resize(pointilles);
    });
</script>
<style>
    .pointilles {
        position: absolute;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        overflow: hidden;
    }
    .pointilles.bottomright {
        background-image: url(/wp-content/themes/salient-child/img/trace-dash-corner-bottomright.png);
        background-position: bottom right;
        background-repeat: no-repeat;
    }
    .pointilles.bottomleft {
        background-image: url(/wp-content/themes/salient-child/img/trace-dash-corner-bottomleft.png);
        background-position: bottom left;
        background-repeat: no-repeat;
    }
    .pointilles.topright {
        background-image: url(/wp-content/themes/salient-child/img/trace-dash-corner-topright.png);
        background-position: top right;
        background-repeat: no-repeat;
    }
    .pointilles.topleft {
        background-image: url(/wp-content/themes/salient-child/img/trace-dash-corner-topleft.png);
        background-position: top left;
        background-repeat: no-repeat;
    }
    .pointilles.straight-1 {
        background-image: url(/wp-content/themes/salient-child/img/trace-dash-straight-vertical.png);
        background-position: bottom left;
        background-repeat: repeat-y;
        width: 4px !important;
    }
    .pointilles.straight-2 {
        background-image: url(/wp-content/themes/salient-child/img/trace-dash-straight-vertical.png);
        background-position: top left;
        background-repeat: repeat-y;
        width: 4px !important;
    }
    .pointilles.none {
        display: none;
    }
    .pointilles .line {
        position: absolute;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        width: 100%;
        height: 100%;
    }
    .pointilles.straight-1 .line, .pointilles.straight-2 .line {
        display: none;
    }
    .pointilles.bottomright .line-1 {
        background-image: url(/wp-content/themes/salient-child/img/trace-dash-straight-horizontal.png);
        background-position: bottom right;
        background-repeat: repeat-x;
        margin-left: -52px;
    }
    .pointilles.bottomright .line-2 {
        background-image: url(/wp-content/themes/salient-child/img/trace-dash-straight-vertical.png);
        background-position: bottom right;
        background-repeat: repeat-y;
        margin-top: -75px;
    }
    .pointilles.bottomleft .line-1 {
        background-image: url(/wp-content/themes/salient-child/img/trace-dash-straight-horizontal.png);
        background-position: bottom left;
        background-repeat: repeat-x;
        margin-left: 65px;
    }
    .pointilles.bottomleft .line-2 {
        background-image: url(/wp-content/themes/salient-child/img/trace-dash-straight-vertical.png);
        background-position: bottom left;
        background-repeat: repeat-y;
        margin-top: -75px;
    }
    .pointilles.topright .line-1 {
        background-image: url(/wp-content/themes/salient-child/img/trace-dash-straight-horizontal.png);
        background-position: top right;
        background-repeat: repeat-x;
        margin-left: -52px;
    }
    .pointilles.topright .line-2 {
        background-image: url(/wp-content/themes/salient-child/img/trace-dash-straight-vertical.png);
        background-position: top right;
        background-repeat: repeat-y;
        margin-top: 65px;
    }
    .pointilles.topleft .line-1 {
        background-image: url(/wp-content/themes/salient-child/img/trace-dash-straight-horizontal.png);
        background-position: top left;
        background-repeat: repeat-x;
        margin-left: 65px;
    }
    .pointilles.topleft .line-2 {
        background-image: url(/wp-content/themes/salient-child/img/trace-dash-straight-vertical.png);
        background-position: top left;
        background-repeat: repeat-y;
        margin-top: 65px;
    }
</style>