How to display numbers as images - nuff easy

G

google

<html>
<head>
<title>JavaScript Replace</title>

<script language="JavaScript1.1" type="text/javascript">
function phils_image_price(input)
{
//declare variables
var output=""
var position=0
var chr=""
//loop
for (var position=0; position < input.length; position++)
{
chr=input.substring(position,position+1)
//replace
if (chr == '£') {output=output + '<img border="0"
src="img/pound.gif">'}
else if(chr == '0') {output=output + '<img border="0"
src="img/0.gif">'}
else if(chr == '1') {output=output + '<img border="0"
src="img/1.gif">'}
else if(chr == '2') {output=output + '<img border="0"
src="img/2.gif">'}
else if(chr == '3') {output=output + '<img border="0"
src="img/3.gif">'}
else if(chr == '4') {output=output + '<img border="0"
src="img/4.gif">'}
else if(chr == '5') {output=output + '<img border="0"
src="img/5.gif">'}
else if(chr == '6') {output=output + '<img border="0"
src="img/6.gif">'}
else if(chr == '7') {output=output + '<img border="0"
src="img/7.gif">'}
else if(chr == '8') {output=output + '<img border="0"
src="img/8.gif">'}
else if(chr == '9') {output=output + '<img border="0"
src="img/9.gif">'}
else if(chr == '.') {output=output + '<img border="0"
src="img/dot.gif">'}
else {output=output + chr}
}
return output;
}
</script>
</head>
<body>

<script language="JavaScript1.1" type="text/javascript">
document.write('£12345678.90')
document.write('<br>')
document.write(phils_image_price('£12345678.90'))
</script>

</body>
</html>
 
W

web.dev

<html>
<head>
<title>JavaScript Replace</title>

<script language="JavaScript1.1" type="text/javascript">
Click to expand...

There is no need for the language attribute.
function phils_image_price(input)
{
//declare variables
var output=""
var position=0
var chr=""
//loop
for (var position=0; position < input.length; position++)
{
chr=input.substring(position,position+1)
//replace
if (chr == '£') {output=output + '<img border="0"
src="img/pound.gif">'}
else if(chr == '0') {output=output + '<img border="0"
src="img/0.gif">'}
else if(chr == '1') {output=output + '<img border="0"
src="img/1.gif">'}
else if(chr == '2') {output=output + '<img border="0"
src="img/2.gif">'}
else if(chr == '3') {output=output + '<img border="0"
src="img/3.gif">'}
else if(chr == '4') {output=output + '<img border="0"
src="img/4.gif">'}
else if(chr == '5') {output=output + '<img border="0"
src="img/5.gif">'}
else if(chr == '6') {output=output + '<img border="0"
src="img/6.gif">'}
else if(chr == '7') {output=output + '<img border="0"
src="img/7.gif">'}
else if(chr == '8') {output=output + '<img border="0"
src="img/8.gif">'}
else if(chr == '9') {output=output + '<img border="0"
src="img/9.gif">'}
else if(chr == '.') {output=output + '<img border="0"
src="img/dot.gif">'}
else {output=output + chr}
Click to expand...

See all that if/else statements you have? This can be more efficient
through the use of the switch statement. Arguably, they will produce
the same results, however, in this case, the switch statement will
execute faster because there's no need to do multiple comparisons. For
example, if the next character was a '.', then it would have to do 12
comparisons, while a switch statement would do a single jump.
}
return output;
}
</script>
</head>
<body>

<script language="JavaScript1.1" type="text/javascript">
document.write('£12345678.90')
document.write('<br>')
document.write(phils_image_price('£12345678.90'))
</script>

</body>
</html>
Click to expand...

In the end, you are limited to doing document.write. But that may be
all you need. However, I would prefer to make it more dynamic and
create those number images on the fly.
 
R

Randy Webb

(e-mail address removed) said the following on 10/26/2005 1:41 PM:
<html>
<head>
<title>JavaScript Replace</title>

<script language="JavaScript1.1" type="text/javascript">
Click to expand...

Unless you fully understand the ramifications of specifying a language
and version it is best left alone. Especially since the language
attribute is deprecated and the type attribute is preferred/required.

<snip code>

Looks like a good candidate for a switch statement.

Was there a question in there anywere?
 
T

Thomas 'PointedEars' Lahn

<html>
<head>
Click to expand...

For a Valid HTML document, on the top a DOCTYPE declaration missing
and where you read this text a character set declaration is missing.

<title>JavaScript Replace</title>

<script language="JavaScript1.1" type="text/javascript">
Click to expand...

You are using the deprecated `language' attribute without
purpose, which is why it is entirely redundant here.
function phils_image_price(input)
Click to expand...

function pointedEars_image_price(s)
{
//declare variables
var output=""
Click to expand...

This variable is unnecessary since `input' can be transformed
(i.e. substrings replaced) and the result of that returned instead.
var position=0
Click to expand...

The declaration of `position' here may also be omitted, see below.
var chr=""
Click to expand...

It is good practice to end JS statements with a semicolon,
just to avoid problems with automatic semicolon insertion.
//loop
for (var position=0; position < input.length; position++)
Click to expand...

Much faster is

for (var position = input.length; position--;)

And if `position' was declared at the top, it was needlessly
redeclared here. Since it refers to the loop, I rather declare
it here than on the top.
{
chr=input.substring(position,position+1)
Click to expand...

Have you never heard of String.prototype.charAt(...)?
//replace
if (chr == '£') {output=output + '<img border="0"
src="img/pound.gif">'}
else if(chr == '0') {output=output + '<img border="0"
src="img/0.gif">'}
else if(chr == '1') {output=output + '<img border="0"
src="img/1.gif">'}
else if(chr == '2') {output=output + '<img border="0"
src="img/2.gif">'}
else if(chr == '3') {output=output + '<img border="0"
src="img/3.gif">'}
else if(chr == '4') {output=output + '<img border="0"
src="img/4.gif">'}
else if(chr == '5') {output=output + '<img border="0"
src="img/5.gif">'}
else if(chr == '6') {output=output + '<img border="0"
src="img/6.gif">'}
else if(chr == '7') {output=output + '<img border="0"
src="img/7.gif">'}
else if(chr == '8') {output=output + '<img border="0"
src="img/8.gif">'}
else if(chr == '9') {output=output + '<img border="0"
src="img/9.gif">'}
else if(chr == '.') {output=output + '<img border="0"
src="img/dot.gif">'}
else {output=output + chr}
}
return output;
Click to expand...

Or you *might* want to consider

return s.replace(
/(£)|([0-9])|(\.)/g,
function (str, p1, p2, p3, offset, s)
{
var filename;

if (p1)
{
filename = "pound";
}
else if (p2)
{
filename = p2;
}
else if (p3)
{
filename = "dot";
}

return ['<img src="', filename, '.gif" alt="',
(p1 || p2 || p3), '" border="0">'].join('');
});

instead.
}
</script>
</head>
<body>

<script language="JavaScript1.1" type="text/javascript">
Click to expand...

Again the unnecessary deprecated `language' attribute.
document.write('£12345678.90')
document.write('<br>')
document.write(phils_image_price('£12345678.90'))
document.write(

</script>
Click to expand...


HTH & HAND

PointedEars
 
D

Dr John Stockton

JRS: In article <[email protected]>
, dated Wed, 26 Oct 2005 11:04:46, seen in
web.dev said:
See all that if/else statements you have? This can be more efficient
through the use of the switch statement. Arguably, they will produce
the same results, however, in this case, the switch statement will
execute faster because there's no need to do multiple comparisons. For
example, if the next character was a '.', then it would have to do 12
comparisons, while a switch statement would do a single jump.
Click to expand...

I think you are optimistic about how a switch statement works
internally. Unless the javascript engine does rather intelligent pre-
processing, the switch statement will still do the comparisons, though
it could do them faster.

More importantly, it's silly to use that approach for the digits. They
can be treated together; and, as they are presumably the most numerous
characters, they should be treated first.

Consider

XX = ""
if (chr>="0" && chr<="9") XX = chr
else if (chr=="£") XX = "pound"
else if (chr==".") XX = "dot" ;
if (XX) output += '<img border="0" src="img/' + XX + '.gif">'}
else output += chr ;

which can be reduced to

XX = chr>="0" && chr<="9" ? chr :
chr=="£" ? "pound" : chr=="." ? "dot" : ""
output += XX ? '<img border="0" src="img/' + XX + '.gif">' : chr ;

Alternatively :

AA = "0123456789.£"
ZZ = [0,1,2,3,4,5,6,7,8,9,"dot","pound"]
XX = AA.indexOf(chr)
output += XX<0 ? chr : '<img border="0" src="img/' + ZZ[XX] + '.gif">' ;

which might extend better to other circumstances.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Help with Visual Lightbox: Scripts 2
How do I fix this issue in sqaurespace code block? 1
Help with my responsive home page 2
Image not changing between "mute" & "un-mute" images. 5
New to coding - image to the time of day based on time 2
I am trying to detect Which image id="" was clicked ? 22
How to treat an input data as variable? 4
Please Help? 0

Members online

No members online now.
Total: 232 (members: 0, guests: 232)
Robots: 405

Forum statistics

Threads
474,436
Messages
2,571,696
Members
48,796
Latest member
Greg L.

Latest Threads

Top