Question 210215 in Html Question posted in
Some basic documentation can be found here.

Input to each letter's own individual image HTML

I am making a HTML website that takes an input in the id userInput and was wondering how to take it apart and insert images for the length of userInput

Say for example the userInput = Hello World
Ideally it would out put the images h.png e.png l.png l.png o.png space.png w.png o.png r.png l.png d.png

As I do not have the files of each individual letter, I am unable to show how it would ideally look, but hopefully you can help me! Though I know that the font disregards capitals.

Thank you once more!

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    HTML

      <button onclick="generateImages()">Generate Images</button>
  <div id="imageOutput"></div>

    JS

    function generateImages() {
  var userInput = document.getElementById('userInput').value;
  var imageOutput = document.getElementById('imageOutput');
  imageOutput.innerHTML = '';

  for (var i = 0; i < userInput.length; i++) {
    var character = userInput[i].toUpperCase();
    var image = document.createElement('img');
    image.src = character === ' ' ? 'FONT/SPACE.png' : 'FONT/' + character + '.png';
    imageOutput.appendChild(image);
  }
}

  2. 0 
    #text{
background-image: url("square.gif");    
width: 195px;
height: 18px;
background-size: 20px;
border: none;
font-family: monospace;
font-size: 13px;
padding-left: 5px;
letter-spacing: 12px;

    }

    Login or Signup to reply.
  3. 0

    You just need to write some Javascript to take your input string, convert it to an array, and iterate through the array, creating an HTML string containing the <img> tags.

    document.querySelector('input').addEventListener('input', evt => {
  document.querySelector('.normal-output').innerHTML = evt.target.value
  const a1 = Array.from(evt.target.value)
  const a2 = []
  a1.forEach(e1 => {
    e2 = (e1 == ' ' ? 'space' : e1)
    a2.push(`<img src="https://donald.au/bugs/so-76709587/${e2}.png">`)
  })
  document.querySelector('.image-output').innerHTML = a2.join('')
})
    body, input {font-family: sans-serif; font-size: 16px;}
.image-output img {height: 100px;}
    <p>
  <input type="text" value="abc">
</p>
<p class="normal-output">abc</p>
<p class="image-output">
  <img src="https://donald.au/bugs/so-76709587/a.png">
  <img src="https://donald.au/bugs/so-76709587/b.png">
  <img src="https://donald.au/bugs/so-76709587/c.png">
</p>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search