txt2img
/*
* txt2img (1.0) // 2008.03.10 // <http://plugins.jquery.com/project/txt2img>
*
* Copyright (c) 2008 TrafficBroker <http://www.trafficbroker.co.uk>
* Licensed under GPL and MIT licenses
*
* txt2img replaces a text inside an element with the correspondent image with that text.
*
* We need name the image correctly:
* Example: for the text: 'Blog. (Personal)' we need this image file name: blog-personal
*
* If the text use non ASCII characters (e.g. accents) we need to indicate the image files manually for each text.
*
* Config Options:
* path: Route where the images are // default: '/images/texts/'
* extension: File extension of the images // default: '.png'
* textsFileNames: Hash with the text and the file name to replace it.
* forceFileName: Indicate a specific file to do the replacement, so we don't need any relation with the text. This way we could have a different image for the same text.
*
* Sample Configuration:
* $('h1').txt2img();
* $('h2').txt2img({path: 'images/other/', extension: '.gif'});
*
* // Non ASCII replacements
* var textsFilesHash = new Array();
* textsFilesHash['camión'] = 'camion';
* textsFilesHash['中国ギョーザか'] = 'japanese-text';
* $('h3').txt2img({textsFileNames: textsFilesHash});
*
* // Indicate individual file
* $('h3.special').txt2img({forceFileName: 'other-image'});
*
* We can override the defaults with:
* $.fn.txt2img.defaults.path = '/images/';
*
* @param settings An object with configuration options
* @author Jesus Carrera <jesus.carrera@trafficbroker.co.uk>
*/
Usage sample
HTML:
<h1>Blog (Personal)</h1>
<h1>Contact Information.</h1>
<h2>Home</h2>
<h3>ホーム</h3>
Files:
images/
home.gif
home-ja.png
headers/
blog-personal.png
contact-information.png
JS:
$.fn.txt2img.defaults.path = 'images/headers/';
$('h1').txt2img();
$('h2').txt2img({path: 'images/', extension: '.gif'});
var textsJa = new Array();
textsJa['ホーム'] = 'home-ja';
$('h3').txt2img({path: 'images/', textsFileNames:textsJa});
Blog (Personal)
Contact Information.
Home
ホーム