Nahraďte textové smajlíky obrázkovými

13. prosince 2002

Knihy návštěv, diskusní fóra, chaty a jiné aplikace můžeme uživatelům zpestřit, pokud zavedeme konverzi textových smajlíků na obrázkové. Pokud do textu uživatel vloží znaky smajlíku, skript to rozpozná a nahradí sekvenci obrázkem.

Základem konverzní funkce je pole, do kterého uložíme seznam kódů smajlíků, které se budou nahrazovat. Kódy vycházejí z určitých standardů, můžeme si však vytvořit i své vlastní kódy, jen je potřeba dát pozor, aby sekvence kódu nekolidovala s některými obecně používanými texty. Například pokud bychom konvertovali tzv. zkrácenou variantu smajlíku :(, mohlo by být pro uživatele obtížné třeba zadat matematický výraz 10:(a-b). Výraz by se zkomolil, protože jeho část by se nahradila obrázkem.

Prohlédněte si ukázku. Náhrada obrázku proběhne tak, že sekvenci textového smajlíku nahradíme prostě elementem určitého obrázku, tyto obrázky musíme mít připravené v nějaké složce. Definice pole nebude až tak rozsáhlá, proto ji vložíme i s konverzní funkcí do jednoho souboru replacesmileys.php.

<?php
$replace = array();
$replace[‚:-D‘]='<img src=“smileys/1.gif“>‘;
$replace[‚:oD‘]='<img src=“smileys/15.gif“>‘;
$replace[‚:-))‘]='<img src=“smileys/2.gif“>‘;
$replace[‚:))‘]='<img src=“smileys/2.gif“>‘;
$replace[‚:)))‘]='<img src=“smileys/2.gif“>‘;
$replace[‚:-)))‘]='<img src=“smileys/2.gif“>‘;
$replace[‚:)‘]='<img src=“smileys/3.gif“>‘;
$replace[‚:-(‚]='<img src=“smileys/8.gif“>‘;
function replace_smile ($body)
{
  global $replace;  // zpřístupnit pole ve funkci
  reset($replace);  // nastavit na začátek
  while(list($key,$val) = each($replace))
    $body = str_replace($key,$val,$body); // procházet pole a nahrazovat zadané výskyty smajlíků
  return $body;
}
?>

Uvedenou funkci replace_smile stačí zavolat s parametrem textu, v kterém se mají nahradit smajlíky. Pokud funkci použijeme před uložením příspěvku (do databáze nebo textového souboru), bude smajlík trvale nahrazen a později s ním už nic nenaděláme, můžeme pouze obměňovat soubory obrázků smajlíků. Pokud příspěvek uložíme tak, jak byl odeslán, a konverzní funkci budeme volat při každém čtení příspěvku, bude čtení sice trochu pomalejší, ale máme více možností manipulace. Volba závisí na typu aplikace a jak rychlou anebo komfortní aplikaci chceme mít.

Jen čisté nahrazování smajlíků je ale řekněme poněkud suché, nehledě na to, že každý smajlík může být zadán různým způsobem a konverze pak nemusí proběhnout správně. Dobrý řešením je nabídnout uživateli vložení smajlíku jediným kliknutím. Jednak je to pohodlné, jednak uživatel hned vidí, jaký smajlík se v příspěvku zobrazí, a hlavně – nebude nám do textu psát navíc smajlíky, které se nezkonvertují nebo se nezkonvertují správně. Pro tuto nápomocnou funkci použijeme jednoduchý JavaScript. Nad pole pro zápis příspěvku naskládáme všechny obrázky smajlíků a k obrázkům přidáme obsluhu události onclick, která do rozepsaného příspěvku vloží kód smajlíku.

<script type=“text/javascript“>
function Smile(what)
{
  document.forms.comment.body.focus();
  document.forms.comment.body.value=
document.forms.comment.body.value+what;
}
</script>
<form name=“comment“ method=“post“>
<img onclick=“Smile(‚:-D ‚)“ src=“smileys/1.gif“ width=“15″ height=“15″ align=“middle“>
<img onclick=“Smile(‚:oD ‚)“ src=“smileys/15.gif“ width=“15″ height=“15″ align=“middle“>
<img onclick=“Smile(‚:-)) ‚)“ src=“smileys/2.gif“ width=“15″ height=“15″ align=“middle“>
<img onclick=“Smile(‚:-) ‚)“ src=“smileys/3.gif“ width=“15″ height=“15″ align=“middle“>
<br />
<textarea name=“body“ rows=“5″ cols=“30″ /></textarea><br />
<input type=“submit“ value=“Odeslat“ />
</form>

V ukázkovém formuláři vidíme, jak se na událost onclick vyvolanou na obrázku některého smajlíka vrátí zaměření na formulář (po kliknutí na smajlík je kurzor zpět textovém poli a uživatel může pohodlně pokračovat v psaní příspěvku). Dále je převzat parametr kódu smajlíku, který je připojen ke stávajícímu obsahu textového pole. Pokud budete vytvářet vlastní formulář, neopomeňte jej správně pojmenovat a upravit název jména textového pole v obslužné funkci, jinak nebude JavaScript pracovat správně. Kód naší ukázky si můžete stáhnout včetně obrázků, snadno si jej pak upravíte pro vlastní aplikaci.

Starší komentáře ke článku

Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.

Štítky: Články

Mohlo by vás také zajímat

Nejnovější

5 komentářů

  1. Koca

    Kvě 19, 2010 v 15:57

    Tady máte delší, ale lehčí řešení.

    $pole=Array(
    „:D“=> „“,
    „:)“=> „“,
    „:(„=>““,
    „:P“=> „“
    );

    $pole2=Array(
    „:D“=> „:D“,
    „:)“=> „:)“,
    „:(„=> „:(„,
    „:P“=> „:P“
    );

    $preved=Str_replace($pole2,$pole,$gh[‚zprava‘]);

    Tento kod musi byt vlozen do while cyklu kde vybirate zpravy, pak uz zpravu vypisete jenom
    echo $preved;

    Odpovědět
  2. Jaroslav Kubíček

    Pro 2, 2010 v 23:12

    Funguje skvěle, v ukázkovém poli akorát chybí položka s indexem „:-)“

    Odpovědět
  3. Anonym

    Pro 26, 2012 v 22:29

    „:D“=> „:D“,

    Odpovědět
  4. uweissnat

    Dub 27, 2023 v 6:03

    Funguje perfektně, ale položka s indexem v poli vzorků chybí. basketball stars

    Odpovědět
  5. Victor Patrick

    Srp 12, 2023 v 10:59

    Moc se mi líbí tvé příspěvky. Děkujeme za tyto užitečné informace Bitlife

    Odpovědět

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *