JSFiddle - React, Tailwind, and code Playground

by lollero

HTML

<img class="myImage" data-link1="#1" data-link2="#2" src="http://placekitten.com/200/300" alt="" />

CSS

.imageWrap { 
    float: left; 
    position: relative;  
}

.imageWrap a {
    position: absolute;
}

.link1 {
    width: 30px;
    height: 30px;
    top: 68px;
    left: 70px;
    border: 1px solid red;
}

.link2 { 
    width: 30px;
    height: 30px;
    bottom: 10px;
    right: 20px;
    border: 1px solid red;
}

JavaScript

$(document).ready(function() {

    $('.myImage').each(function(){
        
        var mimg = $(this),
            mimgD = mimg.data(),
            link1 = mimgD.link1,
            link2 = mimgD.link2;
        
        mimg.wrap('<div class="imageWrap"></div>');

        var mimgWrap = mimg.parent();
        
        if ( link1 ) {
            $("<a class='link1' href="+link1+"></a>").appendTo( mimgWrap );
        }
        
        if ( link2 ) {
            $("<a class='link2' href="+link2+"></a>").appendTo( mimgWrap );
        }
        
    });

});