JSFiddle - React, Tailwind, and code Playground

by peteorpeter

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<img id="img1" src="http://images.mylot.com/userImages/images/postphotos/2094207.jpg" alt="Text to overlay the image"/>

JavaScript

var $img = $("#img1");
var $anchor = $('<div />');
$anchor.css('position', 'absolute');
$anchor.css('cursor', 'default'); // Don't show text-select pointer
$img.before($anchor);

var width = $img.width();
var height = $img.height();
var msg = $img.attr('alt');

// remove alt (if tooltip / accessibility not desired)
$img.removeAttr('alt');

var paper = Raphael($anchor.get(0), width, height);
var msg = paper.text(width/2, 30, msg);
msg.attr({
    fill: "white",
    "font-size": 20
});

// Click event on img
$img.click(function(){
    alert('img clicked!');
});

// Pipe clicks from msg to image
$anchor.click(function(){
    $img.click();
});

// The VML output in IE6 isn't selectable, for modern browsers, we need to turn off selectability with JS
// from http://stackoverflow.com/questions/2310734/how-to-make-html-text-unselectable
var anchor = $anchor.get(0);

if (typeof anchor.onselectstart != 'undefined') {
                 anchor.onselectstart = function() { return false; };
                } else if (typeof anchor.style.MozUserSelect != 'undefined') {
                    anchor.style.MozUserSelect = 'none';
                } else {
                    anchor.onmousedown = function() { return false; };
                }