Membuat tulisan terbalik dengan javascript
30 Jun 2009
Pengen bikin tulisan terbalik seperti ini:
¡ʎoɔ ‘ǝʞo uıʞɐɯ ıpɐɾ ɹǝʇndɯoʞɹǝq - ɯoɔ˙ʎoɔǝʞo
caranya mudah.. tinggal buka website berikut ini dan silakan berkreasi..
http://www.revfad.com/flip.html
Semua bisa dibalik kecuali huruf besar, angka, dan beberapa karakter khusus. Halaman tersebut bisa disimpan ke harddisk dan dijalankan offline (tanpa koneksi internet) karena fungsi javascript yang ikut tersimpan.
Untuk yg suka repot :-), pengen belajar javascript silakan membuat file ini sendiri dengan cara:
1. Buat sebuah file html baru:
<html>
<head></head>
<body></body>
</html>
2. Masukkan meta dan script ini di antara tag <head>...</head>
Meta dan script:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script>
function flip() {
var result = flipString(document.f.original.value.toLowerCase());
document.f.flipped.value = result;
}
function flipString(aString) {
var last = aString.length - 1;
//Thanks to Brook Monroe for the suggestion to use Array.join
var result = new Array(aString.length)
for (var i = last; i >= 0; --i) {
var c = aString.charAt(i)
var r = flipTable[c]
result[last - i] = r != undefined ? r : c
}
return result.join('')
}
var flipTable = {
a : '\u0250',
b : 'q',
c : '\u0254',
d : 'p',
e : '\u01DD',
f : '\u025F', //from pne
g : '\u0183',
h : '\u0265',
i : '\u0131', //from pne
j : '\u027E',
k : '\u029E',
//l : '\u0283',
m : '\u026F',
n : 'u',
r : '\u0279',
t : '\u0287',
v : '\u028C',
w : '\u028D',
y : '\u028E',
'.' : '\u02D9',
'[' : ']',
'(' : ')',
'{' : '}',
'?' : '\u00BF', //from pne
'!' : '\u00A1',
"\'" : ',',
'< ' : '>',
'_' : '\u203E',
'\u203F' : '\u2040',
'\u2045' : '\u2046',
'\u2234' : '\u2235',
'\r' : '\n' //thank you, Yeeliberto
}
for (i in flipTable) {
flipTable[flipTable[i]] = i
}
</script>
3. Di dalam tag <body>...</body> buat sebuah form dengan kode berikut:
<form name="f">Tulisan asli:
<br />
<textarea rows="5" cols="50" name="original" onkeyup="flip()"></textarea> <input value="Flip" onclick="flip()" type="button"/>
<br />
Tulisan terbalik:
<br />
<textarea rows="5" cols="50" name="flipped"></textarea>
</form>
4. Simpan hasil pekerjaan anda dan jalankan file di browser apapun (selain MSIE6)…
30-June-2009 pukul 17:10
Selain website diatas ada juga webiste serupa yaitu http://www.fliptitle.com
1-July-2009 pukul 02:52
Umm…bukannya kalo tulisannya dibuat terbalik jadi sulit baca?
kasian dunk yang baca bisa sakit leher
15-July-2009 pukul 16:14
Tulisan terbalik?? kalau orang yang membuka dari hp masih bisa membaca karena hp mudah dibalik, tapi kalau di pc??? orang bisa pusing, wlaupun itu kren .. Hehe ..
30-July-2009 pukul 11:53
serruuu - seruuan nichh,
bagus…tak coba akhh..
trims ya tips nya,
‘kl pk monitor LCD sich gampang baliknya’
9-January-2010 pukul 09:12
Gampang, pake kaca jg bs koq kcuali mau di bego” in…
klo pke flip ini kan kliatan ciri” yg bego wkt baca nya… hahhaha