隠されている（？）テキストジェネレーター「Text-Sprite Generator」

簡単にデモページを作成しました。
一度、お試しください。

デモページはコチラから

このデモページを作成するのに、必要になったのが、jquery-1.2.6.min.js。
 コチラのURLより、取得してください。
http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.2.6.min.js&can=2&q=

以下、XHTMLとCSSのコードを表記しときます。

XHTML

<a href="" id="sprite">
	E-riverstyle Vangurd
</a>

CSS

a#sprite {
   display: block;
   background: url(http://l.yimg.com/img.sports.yahoo.com/static/bir/headline?txt=E-riverstyle-Vangurd) no-repeat bottom center;
   width: 490px; height: 34px;
   text-indent: -9999px;
}

a#sprite:hover {
   background-position: top center;
}

Javascript

$(function () {
	$("#submit").click(function() {
		var $newText = $("#text-input").attr("value").replace(/\s+/g,'+');
		var $newURL1 = "url(http://l.yimg.com/img.sports.yahoo.com/static/bir/headline?txt=";
		var $newURL2 = ")";
		var $newURL3 = $newURL1 + $newText + $newURL2;
		var $newURL4 = "http://l.yimg.com/img.sports.yahoo.com/static/bir/headline?txt=";
		var $newURL5 = $newURL4 + $newText;
		$("#sprite").css({ backgroundImage: $newURL3 });
		$("#link").html($newURL5);
	});
});