Megtudná valaki oldani azt, hogy a weblapomon ha beírunk egy szöveget angol betűk (36db), akkor az adott szöveget betű helyett betűkhöz társított képekkel jelenítse meg?

Szerveroldali megoldás (PHP):

http://forums.phpfreaks.com/topic/165588-parse-a-string-and-replace-each-character-in-it-with-an-image/

Kliensoldali megoldás (JS):

http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_replace

Ez csak a módszer és az alkalmazandó cserefüggvény bemutatása. A replace függvény paraméterei: replace(mitkeressen, mirecserélje). Neked ilyesmit kell csinálnod:

str=str.replace("a","<img src=a.jpg />");

és a végén persze ...innerHTML=str;

Na, megírtam neked. :)

<script>

function doit() {

var s=document.getElementById("szoveg").value;

s=s.toLowerCase();

z="";

for(var i=0; i<s.length; i++){

z=z+"<img src='betu-"+s[i]+".jpg' />";

}

document.getElementById("kepek").innerHTML=z;

alert("done");

}

</script>

<textarea id="szoveg">

</textarea>

<a href="javascript:doit()">Do it!</a>

<div id="kepek" style="background-color:#AAA">

</div>

Nem szép, de lehet még cicomázni. A lényeg: a képfájlok nevei: betu-a.jpg, betu-b.jpg, ... satöbbi.

Viszont! Szóközhöz meg minden más karakterhez is fog keresgélni képfájlt.

A fapadosabb megoldás, ahol 36 csere van:

<script>

function doit() {

var s=document.getElementById("szoveg").value;

s=s.replace("a","<img src='betu-a.jpg' />");

// ezt itt írd végig!

s=s.replace("z","<img src='betu-z.jpg' />");

document.getElementById("kepek").innerHTML=s;

}

</script>

<textarea id="szoveg">

</textarea>

<a href="javascript:doit()">Do it!</a>

<div id="kepek" style="background-color:#AAA">

</div>

A közepén a parancsokat írd végig a 36 betűre. :)

Kiegészítés: nagybetűkre külön meg kell csinálnod.