JSFiddle - React, Tailwind, and code Playground

by stodolaj

HTML

<!DOCTYPE html>
<html>
    <body>
        <button>Replace IMGs with DIVs</button>
        <img src="http://www.dogbreedinfo.com/images17/NorthernInuitDogFreya14wks.JPG" alt="Dog" />
        <img src="http://www.awf.org/files/3972_image2_western_gorilla_MWatson.jpg" alt="Gorilla"/>
        <img src="http://latimesblogs.latimes.com/photos/uncategorized/2009/02/25/sunita01.jpg" alt="Elephant"/>
    </body>
</html>

CSS

div.replacedImage {
    color:#fff;
    font: bold 1em Verdana;
    padding: 5px;
}

JavaScript

$(function() {
    $("button").click(function() {
        $("img").each(function(i, elem) {
          var img = $(elem);
          var div = $("<div />").css({
            background: "url(" + img.attr("src") + ") no-repeat",
            width: img.width() + "px",
            height: img.height() + "px"
          });
              
          div.html(img.attr("alt"));
          div.addClass("replacedImage");
            
          img.replaceWith(div);
        });
    });
});