输入每个字母自己的单独图像HTML

Question

我正在制作一个 HTML 网站，该网站在 id

input

中带有

userInput

，并且想知道如何将其拆开并插入长度为

userInput

的图像

例如说

userInput

=

Hello World

理想情况下，它会输出图像

h.png

e.png

l.png

l.png

o.png

space.png

w.png

o.png

r.png

l.png

d.png

由于我没有每封信的文件，我无法展示它的理想外观，但希望你能帮助我！虽然我知道字体不考虑大写字母。

再次感谢您！

Answer 1

您只需编写一些 Javascript 来获取输入字符串，将其转换为数组，然后迭代该数组，创建一个包含

<img>

标签的 HTML 字符串。

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>

Answer 2

我有办法

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);
  }
}

Answer 3

要在 HTML 中将每个字母显示为其单独的图像，您可以为每个字母使用“img”标签，并将“src”属性设置为相应图像的 URL。

在此示例中，每个字母（A、B、C）将由其各自的图像表示。将“src”属性中的图像 URL 替换为您要用于每个字母的图像的实际 URL。

请记住，如果您在本地托管图像，请确保可以通过提供的 URL 或相对路径访问图像文件。此外，请考虑为每个图像使用适当的替代文本（“alt”属性），以确保可访问性并提高 SEO。

Answer 4

    #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;
}