Jump to content

convert input text into images based on alphabet


ajrocha81

Recommended Posts

the idea on what im doing is like a converter, like showing what your name would look like with certain images per letter, when you input text (your name for example) and when you press the submit button you would get a series of images in a row that represent each character that you typed.

 

here is the example that i did...

<html><?php if(isset($_POST['Translate'])) {$image = array(    'a' => 'a.png',    'b' => 'b.png',    'c' => 'c.png',  );$char = $_POST["ConvertEng"];for  ($i=0; $i<strlen($string); $i++) {?>Character: <?php echo $char[$i]; }?><br /><br /><img src="<?php echo $image[$char]; ?>"     alt="Images for the '<?php echo $char ?>' character."/><br /><br /><?php } ?>  <p style="text-align: center;">     <form action='convert.php' method ='POST'><table border="2"><tr><td>Convert English into images :</td><td><input type="text" name="ConvertEng" size"20"></input></td></tr></table><input type="submit" name = "Translate" value = "Translate"></form>    <p></html>
so far this works on 1 character 1 image only , BUT :happy-04: how would i correct this coding by getting the whole text(more than 1 character in the inputed text) into their correct sequence of images... 
Link to comment
Share on other sites

Hi,

 

I changed the $string to $char which was the problem, but it is still not seeing full texts. 

It would see single letter inputs (like a, b, c) on its own but not full words (like tony or alphabet).

Am i still missing something,is using the array this way a bad idea???  

Link to comment
Share on other sites

You have an error in the logic. The code to output "Character: X" is within the loop, but the code to output the image is not - so only the image for the last letter would display. You should not go in and out of PHP/HTML like that because it becomes hard to find such errors. Have all your PHP code run and create variable to output in the HTML. I found numerous minor issues that were hard to spot because of the poor code formatting.

 

NOTE: The below does not differentiate between 'a' and 'A'.

<?php
 
//Get the input from POST data
$string = isset($_POST['string']) ? trim($_POST['string']) : false;
 
$output = '';
if(!empty($string))
{
    $letters = str_split($string);
    foreach($letters as $letter)
    {
        $output .= "Character: {$letter}<br /><br />\n";
        if(ctype_alpha($letter))
        {
            $output .= "<img src='{$letter}.png' alt=\"Images for the '{$letter}' character.\" /><br /><br />\n\n";
        }
    }
}
?>
<html>
<body>
    <?php echo $output; ?>
    <p style="text-align: center;">
    <form action='convert.php' method ='POST'>
    Convert English into images : <input type="text" name="string" size="20"></input>
    <br />
    <button type="submit">Translate</button>
    </form>
    <p>
</body>
</html>
Edited by Psycho
Link to comment
Share on other sites

wow i am amazed at this code....... small simple and yet powerful. 

your use of ctype_alpha and str_split is very new to me and and i now see why an array wasn't needed in this example.

 

i sampled the code and im beginning to understand the logic of this code... the images get displayed from the input, although its from top to bottom in every new line instead of left to right, 

but im gonna work on that. 

 

i am new at this and i am aiming to become a php/web programmer. LOLOL but seeing this code so i have got a looooong way to go.

 

Thank you.

 

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.