Replace numbers with images

Question

So basically what I want to do is use jQuery to replace numbers with images.

I want to replace 5hr 53min with images so if there is a 5 then it will display 5.jpg, and the same thing with the 3 to replace that and display 3.jpg.

Here is an example of what I want to do: http://pastehtml.com/view/c9of5gm15.html

What is the problem you encountered? – Robert Christ Aug 28 '12 at 01:37 — Robert Christ, Aug 28 '12 at 01:37

score 3 · Accepted Answer · answered Aug 28 '12 at 01:39

3

$('time').html(function(i, v){
    return v.replace(/(\d)/g, '<img src=$1.jpg />');
});

Here's the fiddle: http://jsfiddle.net/FtfkK/

answered Aug 28 '12 at 01:39

Joseph Silber

214,931
59
362
292

i seem to have a small problem, im echoing a mysql query and it wont display. – blaize9 Aug 28 '12 at 02:16
@blaize9 - Can you post your HTML in a fiddle? – Joseph Silber Aug 28 '12 at 02:16
@blaize9 - Post the final HTML, not the PHP. – Joseph Silber Aug 28 '12 at 02:41
@blaize9 - You have to put your code in [document ready](http://api.jquery.com/ready/): `$(function(){ /* all code here */ });` – Joseph Silber Aug 28 '12 at 23:14
That fixed it! Thank you I wont forget to give you some rep when i get 15 rep. – blaize9 Aug 29 '12 at 00:33

score 1 · Answer 2 · answered Aug 28 '12 at 01:39

1

var number = 5;
$('#myImage').attr('src', 'my_image_path/' + number + '.jpg');

answered Aug 28 '12 at 01:39

Shomz

37,421
4
57
85

score 0 · Answer 3 · edited May 23 '17 at 12:24

0

You will want to draw your numbers using a HTML canvas, and then create a data URL

See Capture HTML Canvas as gif/jpg/png/pdf?

edited May 23 '17 at 12:24

Community

1
1

answered Aug 28 '12 at 01:39

Matt Tew

1,581
1
9
15

Or, if you have the digits already, use @Shomz solution, of course. – Matt Tew Aug 28 '12 at 01:40
Hmm i might use this in the future =D – blaize9 Aug 28 '12 at 02:12

Replace numbers with images

3 Answers3