+ Post New Thread
Results 1 to 13 of 13
Web Development Thread, Convert Text to an Image in Coding and Web Development; I need to convert some text in a table into an image: Example: I have the text "Achived" in a ...
  1. #1

    Join Date
    Apr 2006
    Location
    UK
    Posts
    939
    Thank Post
    39
    Thanked 70 Times in 54 Posts
    Rep Power
    30

    Convert Text to an Image

    I need to convert some text in a table into an image:

    Example:

    I have the text "Achived" in a cell

    I want to convert that to "trafficlightG.jpg"

    I was hoping i could do something like this in css, hiding the text and using background-image, but it has a class used throught the site and i cannot amend the class otherwise it will effect areas that I dont want it to.

    However the text "Achived" will only appear once, so if i could target the text somehow....

  2. #2

    Join Date
    May 2008
    Location
    Cheshire
    Posts
    298
    Thank Post
    49
    Thanked 27 Times in 24 Posts
    Rep Power
    19
    Hi DanIT,

    Where are you getting the results from? You using HTML, ASP, PHP, etc.?!

    If it's going to be static I'd just hard code it in. If not then in asp you can do something like

    <%
    if wordVariable = "Archived" then
    response.write "<img src='trafficLight.jpeg' alt='Archived' />"
    else
    response.write wordVariable
    end if
    %>

    As far as I know, you can't do that type of thing in CSS (I may be wrong however). But if you could, then you have the issue of some browsers may not support it.

    I know you could target the text if it's in a 'hidden' textbox using Javascript, then change the image depending on the word. However, I'd prefer the previous option and use ASP, PHP or something similar!
    Last edited by Pashers; 6th January 2009 at 10:02 AM. Reason: Addition to the coding

  3. #3

    dhicks's Avatar
    Join Date
    Aug 2005
    Location
    Knightsbridge
    Posts
    5,683
    Thank Post
    1,268
    Thanked 789 Times in 686 Posts
    Rep Power
    237
    Quote Originally Posted by danIT View Post
    I have the text "Achived" in a cell. I want to convert that to "trafficlightG.jpg"
    Is there some reason why you can't change what's generated on the server? Can you add some Javascript to do it - just replace the cell's text contents with an IMG instead?

    --
    David Hicks

  4. #4

    CESIL's Avatar
    Join Date
    Nov 2006
    Location
    Hampshire
    Posts
    1,404
    Thank Post
    109
    Thanked 267 Times in 198 Posts
    Rep Power
    169
    If the page is dynamically generated with php/asp/jsp or similar then you could insert the text as a class name rather than the table cell contents.

    <%
    if wordVariable = "Archived" then
    response.write "<td class='archived'></td>"
    end if
    %>

    you can then control the image displayed via css

    I use this method in house point tables to fill a cell with the appropriate colour.

  5. Thanks to CESIL from:

    danIT (6th January 2009)

  6. #5

    CESIL's Avatar
    Join Date
    Nov 2006
    Location
    Hampshire
    Posts
    1,404
    Thank Post
    109
    Thanked 267 Times in 198 Posts
    Rep Power
    169
    I just noticed you wrote there is already a class in there so in that case I would put a div in the cell with the appropriate css id

  7. Thanks to CESIL from:

    danIT (6th January 2009)

  8. #6

    Join Date
    May 2008
    Location
    Cheshire
    Posts
    298
    Thank Post
    49
    Thanked 27 Times in 24 Posts
    Rep Power
    19
    CSS is not controlling which image is being shown, that's the job for ASP. CSS is only styling how the image looks. Not being petty, but shouldn't I get the credit as well?! cadjs pratically said what I said!?

  9. #7

    CESIL's Avatar
    Join Date
    Nov 2006
    Location
    Hampshire
    Posts
    1,404
    Thank Post
    109
    Thanked 267 Times in 198 Posts
    Rep Power
    169
    Actually css is controlling which image.

    The tag name specifies which background image to display in the cell or div.

    The backend code inserts the tag name based on the value stored in the variable.

    A change to the css definition will change the image without changing the code.

    If other images were required for other values then this would only require additional css definitions.
    Last edited by CESIL; 7th January 2009 at 09:34 AM. Reason: added bit about additional values

  10. #8

    Join Date
    May 2008
    Location
    Cheshire
    Posts
    298
    Thank Post
    49
    Thanked 27 Times in 24 Posts
    Rep Power
    19
    Why would you want to use css to style the images visability? ASP will display the image or not include the image at all. You don't need to style the image's visability if you're using ASP. For example:
    ----------------
    <table><tr><td>
    <%
    if wordVariable = "Archived" then
    response.write "<img src='trafficLight.jpeg' alt='Archived' />"
    else
    response.write wordVariable
    end if
    %>
    </td></tr></table>
    ----------------

    Would display the image if the word is Archived. Whereas, if the word is not 'Archived' then it will not have the image at all but have the word which is stored in wordVariable. So you wouldn't need to style the image's visability.

    Off course, you can still style it the image if you wish to <img class='Archived'...> and in the style sheet you may remove the image border.

  11. #9

    localzuk's Avatar
    Join Date
    Dec 2006
    Location
    Minehead
    Posts
    18,141
    Thank Post
    522
    Thanked 2,550 Times in 1,979 Posts
    Blog Entries
    24
    Rep Power
    877
    My guess as to why you'd not want to do it in ASP is that it allows you to split 'code' from 'design'. ie. A designer doesn't have to go delving into the code of an application in order to simply use an image.

  12. #10

    Join Date
    May 2008
    Location
    Cheshire
    Posts
    298
    Thank Post
    49
    Thanked 27 Times in 24 Posts
    Rep Power
    19
    The code would be embedded within the HTML and to add/remove the css you'll still need to modify the code as much as adding removing the image!? Off course, if you don't want the image to be displayed, the browser would still have to upload the image wheter it's hidden or not.

  13. #11
    Friez's Avatar
    Join Date
    Dec 2006
    Posts
    839
    Thank Post
    22
    Thanked 22 Times in 21 Posts
    Rep Power
    23
    You can't convert text to an image using raw HTML or CSS you will almost certainly need something like ASP or PHP, or if you're REALLY desperate then
    Java(script) the latter is a seriously gross solution though.

    Anyway, someones posted about ASP which I don't know much about. If you need a PHP solution here's what you should look up:

    You will need GD set up on your PHP (Instructions here)

    And to write text to images you will use the imagettftex function in PHP Syntax and Example code.

    Here is their example code:
    PHP Code:
    <?php
    // Set the content-type
    header('Content-type: image/png');

    // Create the image
    $im imagecreatetruecolor(40030);

    // Create some colors
    $white imagecolorallocate($im255255255);
    $grey imagecolorallocate($im128128128);
    $black imagecolorallocate($im000);
    imagefilledrectangle($im0039929$white);

    // The text to draw
    $text 'Testing...';
    // Replace path by your own font path
    $font 'arial.ttf';

    // Add some shadow to the text
    imagettftext($im2001121$grey$font$text);

    // Add the text
    imagettftext($im2001020$black$font$text);

    // Using imagepng() results in clearer text compared with imagejpeg()
    imagepng($im);
    imagedestroy($im);
    ?>
    You can modify that slightly to create a re-usable class. For example if I do this:

    ImageText.php
    PHP Code:
    <?php
    // Set the content-type
    header('Content-type: image/png');

    // Create the image
    $im imagecreatetruecolor(40030);

    // Create some colors
    $white imagecolorallocate($im255255255);
    $grey imagecolorallocate($im128128128);
    $black imagecolorallocate($im000);
    imagefilledrectangle($im0039929$white);

    // The text to draw
    $text $_GET['text'];
    // Replace path by your own font path
    $font 'arial.ttf';

    // Add some shadow to the text
    imagettftext($im2001121$grey$font$text);

    // Add the text
    imagettftext($im2001020$black$font$text);

    // Using imagepng() results in clearer text compared with imagejpeg()
    imagepng($im);
    imagedestroy($im);
    ?>
    I would be able to do this in html:
    Code:
    <img src="ImageText.php?text=HELLO!">
    No prizes for guessing what the text says Nifty eh?
    Tweak as necessary

    Hope that helps!

    Edit

    Hmmm I might not fully understand the question re-reading it. The above is a solution to directly convert some text into an image that displays the said text. For hiding text in-line in the browser you should look into DHTML (Dynamic HTML) which DOES use Javascript, which is probably the only way you could do this if said text has to be written out to the browser in the first place (if you're using a preprocessor like PHP or ASP you should definitely process said text out in advance). Unlike CSS, DHTML will re-write the page once it has already been presented, thus removing the said text from the page (and replacing it with something else completely) rather than just hiding it with CSS.
    Last edited by Friez; 7th January 2009 at 11:25 AM.

  14. #12

    Join Date
    Aug 2005
    Location
    London
    Posts
    3,157
    Thank Post
    116
    Thanked 529 Times in 452 Posts
    Blog Entries
    2
    Rep Power
    124
    Quote Originally Posted by Pashers View Post
    Why would you want to use css to style the images visability? ASP will display the image or not include the image at all. You don't need to style the image's visability if you're using ASP. For example:
    As Localzuk has said, I'd guess this is about trying to separate code from design.

    Not sure what this is being used for, but if it's going to be visible to the public then you need to be concerned about accessibility. With css doing the work, you're making it easy to have (say) different style sheets for people with visual impairment who may just want text without the image. Much easier to just have a style sheet handling all of this stuff

  15. #13

    Join Date
    Jun 2007
    Location
    Middlesbrough
    Posts
    143
    Thank Post
    17
    Thanked 10 Times in 10 Posts
    Rep Power
    16
    Hi

    I have found a solution for this utilising something called SIFR Mike Davidson - sIFR

    another way is using typeface Typeface.js - A sIFR Alternative

    Both provide good clean code and are accesable

    Cheers

    Damien

SHARE:
+ Post New Thread

Similar Threads

  1. Convert RM SmartCache2 to PC
    By speckytecky in forum How do you do....it?
    Replies: 1
    Last Post: 14th October 2008, 02:44 PM
  2. media convert
    By CyberNerd in forum How do you do....it?
    Replies: 1
    Last Post: 12th February 2008, 02:58 PM
  3. Replies: 5
    Last Post: 13th January 2008, 11:39 PM
  4. convert to mp3
    By Uraken in forum General Chat
    Replies: 16
    Last Post: 23rd March 2007, 08:47 AM
  5. Batch image convert...
    By indie in forum Windows
    Replies: 17
    Last Post: 12th December 2006, 12:19 PM

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •