文字列変換について
以下のようなソースで作っています。
文字を画像に変換する基本的な事は出来たのですが、どうしたのかhtmlに書かれている
すべてのひらがなが画像に置き換わってしまいます。
<body>以下のすべてのひらがなが影響を受けてしまいます。
（ひらがなは花の名前をひらがなで書くため、ひらがなだけが影響を受けます）
form、inputしてそれだけを画像にしてくれればいいのですが…
ソースは以下の通りです。
<script type="text/javascript" src="js/chgpic.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
// 上のJavaScript （chgpic.js）は以下の通りです。
function func(){
document.body.innerHTML = document.body.innerHTML.split('つつじ').join('<img src="tutuji.gif">');
document.body.innerHTML = document.body.innerHTML.split('さくら').join('<img src="sakura.gif">');
}
そしてbodyタグの前にphpをちょこっと書きます。
<?PHP
// 対象文字列を取得する
$targetText = $_POST["target_text"];
// 文字列置換を行う
$replaceText = str_replace("A", "×", $targetText);←ここをchgpic.jsにある花の名前を花の画像に変えます。
?>
<body onLoad="func()">
<form method="post" action="">
<textarea name="target_text" cols="50" rows="3"></textarea>
<input name="変換" type="button">
<br>
<div><?= $replaceText ?></div>
</form>
こんな感じですが、どうもbodyにある onLoad="func()" が駄目なようです。
これはページ読み込み時に動作するという事でよろしいでしょうか？
formのtextareaに入力した文字が
最後の<?= $replaceText ?>に画像で出ればよいのですが。
私はphpなど全くの初心者で、あちこちのサイトやプログラムからつぎはぎで何とかここまで作ったのですが
基礎が出来ていないのでやはり難しいです。
body にonLoadじゃない他の命令を書くのか？
ボタンを押して<?= $replaceText ?>に画像が出るようにするにはどうすればよいでしょうか？
また書く必要のない命令文などはありますか？
逆に欠けているものは…
わかりにくい文言で申し訳ありません。
アドバイスをお願いいたします。
