CODEWITHSUNDEEP
jqueryhtmlfonts
user1091856
user1091856

Reputation: 3158

Jquery function that replaces characters with images

Is it a good idea to use a jquery function that replaces each character from a text to custom character images?

For example: when calling the function, you must pass as argument which element you want to have the characters replaced, and jquery will do (if the given element contains "hello world")

<img src="h.png"> 
<img src="e.png">
<img src="l.png"> 
<img src="l.png"> 
<img src="o.png"> 
<img src="space.png"> 
<img src="w.png"> 
<img src="o.png"> 
<img src="r.png"> 
<img src="l.png"> 
<img src="d.png">

Will this trick slow down my page too much?

ps: I want to use a png image for each character rather than a font file because there is going to be some special effects applied in these images that would be impossible to do with simple font.

Upvotes: 0

Views: 147

Answers (2)

Adam Rackis
Adam Rackis

Reputation: 83376

The main problem—as mu mentioned—is that this will affect accessibility: vision impaired people can use readers that parse web pages and read the content back to them.

And yes, this will slow down page load times immensely—now your browser has to request a new image for each character in your page.

Upvotes: 0

Emre Erkan
Emre Erkan

Reputation: 8482

I agree with everyone. I don't know what effect do you planning but there might be a better solution. Anyway, if you decided to go that way here is an example;

var text = $('div').text(), i, il= text.length, result = [], char;
for(i=0;i<il;i++) {
    char = text.charAt(i);
    if(char === " ") {
        char = "space";
    }
    result.push('<img src="' + char + '.png" alt="' + char + '" />');
}
$('div').html(result.join(''));

jsFiddle example is here.

Upvotes: 1

Related Questions