That’s easy for you, but Joe Average would have hard time trying to copy this kitty.
Here is the source, for curious (needs jQuery). The image url (?f=kitty
) is accessible only (well…) by ajax requests:
<div style="position:relative;height:128px;width:128px">
<img id="test" style="position:absolute;" />
<span id="warn"></span>
</div>
<script>
$(function () {
function myRemove(evt) {
if (evt.type != "keydown" || evt.ctrlKey || evt.altKey || evt.metaKey || evt.which == 121) {
$("#test").attr("src", null);
$("html").off("mouseleave keydown contextmenu").on(evt.type == "mouseleave" ? "mouseenter" : "click", myInsert);
$("#warn").html("Click somewhere to bring the kitty back.");
}
}
function myInsert(evt) {
if(evt && (evt.ctrlKey || evt.altKey || evt.metaKey)) return;
if(evt) myRequest.abort();
if(mySrc) {myReload(mySrc); return;}
myRequest = $.ajax({
url : "?f=kitty", /* replace this by your image url */
processData : false,
}).done(function(src){
mySrc = src ? src : null;
myReload(mySrc);
});
}
function myReload(src) {
$("#test").attr("src", src);
$("html").off("click mouseenter").on("mouseleave keydown contextmenu", myRemove);
$("#warn").html("");
}
mySrc = null;
myInsert(null);
});
</script>