JSFiddle - React, Tailwind, and code Playground

by David Thomas

HTML

<a href="http://www.example.com/image.png" class="textToImg">Some text</a>

JavaScript

function textToImage(elem) {
    if (!elem) {
        return false;
    }
    else if (elem.firstChild.nodeType == 3) {
        var text = elem.firstChild.nodeValue;
        var img = document.createElement('img');
        img.src = elem.href;
        elem.setAttribute('data-text', text);
        elem.removeChild(elem.firstChild);
        elem.appendChild(img);
    }
}


var imgLinks = document.getElementsByClassName('textToImg');

for (var i = 0, len = imgLinks.length; i < len; i++) {
    imgLinks[i].onmouseover = function() {
        textToImage(this);
    };
}