How to: using images with TeX in their alt or title tags as input

From http://stackoverflow.com/questions/14610821/apply-mathjax-to-arbitrary-elements/14631703#14631703 (cc-by-sa)

<script type="text/x-mathjax-config">
 MathJax.Extension.myImg2jax = {
  version: "1.0",
  PreProcess: function (element) {
    var images = element.getElementsByTagName("img");
    for (var i = images.length - 1; i >= 0; i--) {
      var img = images[i];
      if (img.className === "dvipng") {
        var script = document.createElement("script"); script.type = "math/tex";
        var match = img.alt.match(/^(\$\$?)(.*)\1/);
        if (match[1] === "$$") {script.type += ";mode=display"}
        MathJax.HTML.setScript(script,match[2]);
        img.parentNode.replaceChild(script,img);
      }
    }
  }
};
MathJax.Hub.Register.PreProcessor(["PreProcess",MathJax.Extension.myImg2jax]);
</script>

This defines a new preprocessor that looks for your images and extracts the math from the ALT tags. This assumes you use $...$ for in-line math and $$...$$ for displayed math.

This code removed the image when it converts it to the MathJax <script> tag. It would be possible to move the image to a preview span where it will show up until MathJax processes the TeX code. That is a bit more sophisticated, but could be done with a little more work.