Download the EasyCFM.COM Browser Toolbar!
Replacing Ugly Text With Nice Text Graphics
Replacing Text With Graphics


Have you ever though, "Man oh man, I wish I could make my text look a lot better." If so, then this tutorial is for you! How would you like all your text to come up completely different? Actually come up as predesigned graphics instead of the text you entered. This is how.

First you need a graphic library, the one I made is simple and was made in photoshop. I didnt take a whole lot of time making the letters so some arnt centered properly. The library I made up looks like this, but is not limited to:

A =
B =
C =
D =
E =
F =
G =
H =
I =
J =
K =
L =
M =
N =
O =
P =
Q =
R =
S =
T =
U =
V =
W =
X =
Y =
Z =
! =
. =

Below type any letters you see above and click submit. The CF code will replace the letters with letter graphics.

Lets see exactly whats going on in the window above. Here is the code (I have commented the code to explain what is going on here):
---------------------------------------------------------------------------------------------------
<!--- We are defining #FORM.title# --->
<cfparam name=
"FORM.title" default=""
>
<!--- A simple form to submit the text to be processed --->
<form name=
"cool" method="post" action="word.cfm">
<textarea name="title" cols="70" rows="8" id="title"></textarea>
<input type="submit" name="Submit" value="Submit">
</form>

<!--- If the form has been filled out then process the following code --->
<cfif
#FORM.title# NEQ "">
<!--- Tell ColdFusion that instead of typing #FORM.title#, we can use #title# instead --->
<cfset title = #FORM.title#>
<!--- We are just showing how many charcters were submited in the form, this is for show --->
Length of String:
<cfoutput>#len(title)#</cfoutput>
<br><br>
Graphic Version:
<br>
<!--- #number# has to atleast be defined once before being called and #word3# as well --->
<cfset number = 0>
<cfset word3 = "">
<!--- We want to run this code as many times as there are letters. #len(title)# is how many characters were submited --->
<cfloop from="1" to="#len(title)#" index="i">
<!--- Make #number# increment by 1 during each loop --->
<cfset number = #val(number + 1)#>
<!--- We are grabbing each letter one by one for processing, increments by one from #number# --->
<cfset word2 = mid(title,number,1)>
<!--- If the letter being processed is not a period, a space, or the enter key then process the following code -->
<cfif #word2# NEQ " " AND #word2# NEQ "." AND #word2# NEQ chr(13) AND #word2# NEQ chr(10)>
<!--- Replace the text letter with the graphic letter .jpg file --->
<cfset word3 = word3 & Replace(word2,word2,'<img src="/images/letter_images/#word2#.jpg" alt="#word2#">',"all")>
</cfif>
<!--- If #word2# is a space then process this code --->
<cfif #word2# EQ " ">
<!--- Replace the space with the graphic space .jpg file --->
<cfset word3 = word3 & Replace(word2,word2,'<img src="/images/letter_images/blank.jpg" alt="space">',"all")>
</cfif>
<!--- If #word2# is a period then process this code --->
<cfif #word2# EQ ".">
<!--- Replace the period with the graphic period .jpg file --->
<cfset word3 = word3 & Replace(word2,word2,'<img src="/images/letter_images/dot.jpg" alt="period">',"all")>
</cfif>
<!--- If #word2# is the enter key then process this code --->
<cfif #word2# EQ chr(13)>
<!--- Replace the enter key with the enter key .jpg file --->
<cfset word3 = word3 & Replace(word2,chr(13),'<br>',"all")>
</cfif>
</cfloop>
<!--- Output the graphics --->
<cfoutput>
#word3#</cfoutput>
</cfif>

---------------------------------------------------------------------------------------------------

You can download a full working version of this code which you can modify here. Otherwise, enjoy!

Wesley Geddes, Owner
Complete Creations



All ColdFusion Tutorials By Author: Wesley Geddes
  • CFLOGIN MADE EASY
    This will show how you can validate a user then use CFLOGIN and determine the users admin level within the Application.cfm file. Not hard whatsoever. This one is correct Pablo.
    Author: Wesley Geddes
    Views: 23,345
    Posted Date: Sunday, February 6, 2005
  • Replacing Ugly Text With Nice Text Graphics
    This tutorial will show you how to replace a text string with letter graphics. This is very nice and includes a zip file with all source ready to run. This also includes an active interactive example right here on the tutorial.
    Author: Wesley Geddes
    Views: 19,441
    Posted Date: Friday, July 15, 2005
  • Using Arrays for Your Sites Security
    You must have a basic understanding of Arrays! This tutorial will showe you how to implement many security checks with 1 database field using Arrays.
    Author: Wesley Geddes
    Views: 16,672
    Posted Date: Wednesday, June 22, 2005