-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtexto.html
108 lines (96 loc) · 3.53 KB
/
texto.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<!DOCTYPE html>
<html>
<head>
<title>Image Alphabet Phrase</title>
<style>
.letter-image {
display: inline-block;
width: 50px;
height: 50px;
object-fit: contain;
}
.shifted {
text-transform: uppercase;
}
.blank-box {
display: inline-block;
width: 50px;
height: 50px;
background-color: #ccc;
margin: 5px;
}
</style>
</head>
<body>
<div>
<label for="phrase-input">Enter a phrase:</label>
<textarea id="phrase-input" rows="5"></textarea>
</div>
<div id="phrase-container"></div>
<script>
// Define the path to the folder containing the letter images
var imagePath = 'D:/Meu repositorio/Estudos/auladesign/imagensletras/';
// Define the mapping of letters to image filenames
var letterImages = {
'a': 'a.jpg',
'b': 'b.jpg',
'c': 'c.jpg',
'd': 'd.jpg',
'e': 'e.jpg',
'f': 'f.jpg',
'g': 'g.jpg',
'h': 'h.jpg',
'i': 'i.jpg',
'j': 'j.jpg',
'k': 'k.jpg',
'l': 'l.jpg',
'm': 'm.jpg',
'n': 'n.jpg',
'o': 'o.jpg',
'p': 'p.jpg',
'q': 'q.jpg',
'r': 'r.jpg',
's': 's.jpg',
't': 't.jpg',
'u': 'u.jpg',
'v': 'v.jpg',
'w': 'w.jpg',
'x': 'x.jpg',
'y': 'y.jpg',
'z': 'z.jpg'
};
// Function to create and display image elements for each letter in the phrase
function displayPhraseAsImages() {
var phraseInput = document.getElementById('phrase-input');
var lines = phraseInput.value.split('\n');
var phraseContainer = document.getElementById('phrase-container');
phraseContainer.innerHTML = ''; // Clear any previous content
for (var j = 0; j < lines.length; j++) {
var line = lines[j];
for (var i = 0; i < line.length; i++) {
var letter = line[i].toLowerCase();
if (letter in letterImages) {
var imageFilename = imagePath + letterImages[letter];
var imageElement = document.createElement('img');
imageElement.src = imageFilename;
imageElement.alt = letter;
imageElement.classList.add('letter-image');
phraseContainer.appendChild(imageElement);
} else if (letter === ' ') {
var blankBox = document.createElement('div');
blankBox.classList.add('blank-box');
phraseContainer.appendChild(blankBox);
} else {
console.warn('No image found for letter ' + letter);
}
}
phraseContainer.appendChild(document.createElement('br')); // Add line break after each line
}
}
var phraseInput = document.getElementById('phrase-input');
phraseInput.addEventListener('input', displayPhraseAsImages);
window.addEventListener('keydown', applyShiftEffect);
window.addEventListener('keyup', applyShiftEffect);
</script>
</body>
</html>