how transform text into an image before placing it on a div

[breaststroke]

Hello!!! I am working on a chat developed with Ajax.I am trying to add emoticons to a chat on my site.I am planning to transfom them into text before sending them to the database. This is okay and i know how to do it.The problem is when I want to display those emoticons (along with text) on a div, after querying the data base.I don't know how to transform the text into images.I guess I have to use the Replace function or a similar one, but i don't know how to do it with images. this is what I have, the function which send the data to another page and get the response.I am using appendChild because I want the new texts to be placed after the previous ones.

....//the image/s I want to display:var imagen=new Imagen();imagen.src="http://www.websmileys.com/sm/sad/239.gif";....xmlhttp.onreadystatechange=function()   {if(xmlhttp.readyState==4 && xmlhttp.status==200)   {/* get here the response after having visited the page chatter.php*/   newdiv.innerHTML =xmlhttp.responseText;   }   }//I create a new element to put the new data:var add=document.createElement("div");var newdiv = add;//the element I already have on HTML:var container = document.getElementById("iddiv");container.appendChild(newdiv);xmlhttp.open("GET","chatter.php",true);xmlhttp.send();.......}

Let's suppose I have some text like: uwyeruw--qweoo00, that I want to transform into the image above.How can i do that and send it along the rest of the text, into the newdiv variable? Thank you very much in advance, for any hint and for reading my post. Regards

[justsomeguy]

For string replacement in Javascript you can either use a regular expression or the String.split and Array.join methods. http://w3schools.com/jsref/jsref_replace.asp

[breaststroke]

Thank you justsomeguy.I had already tried that function, but it may be just for strings. When I add the image url into it as the "substring" to be replaced, it doesn't work.i think I may need a different function or maybe the same one, but how would I place the image? this is the function you are talking about:

var str="Visit Microsoft!";document.write(str.replace("Microsoft", "W3Schools"));

Besides, I think the "write" part is suggesting we work with strings not with images. Not sure about it, though.I have tried getting the url into it , but it doesn't work. Thank you

[justsomeguy]

You need to replace it with a complete HTML img tag, which is just a string. There's nothing special about a string which represents an img tag that points to an image, it's still just a string. It will work if you do it right, so if you want help with that then post what you've tried and we can take a look at it.

[breaststroke]

Hello again, Thank you very much. I wasn't considering an image as string.My fault.I have tried with text and it works fine, but when I include an image tag it doesn't.This is the function:

..xmlhttp.onreadystatechange=function()   {   if(xmlhttp.readyState==4 && xmlhttp.status==200)   {//I use the replace function here. If I replace the string with text it works, but it doesn't this way(with an image):   newdiv.innerHTML = "<span style='color: #661166;'>"+name+"</span>:"+" "+xmlhttp.responseText.replace(/t/gi,"<img src="public_html/imagess/corner.jpg" alt="Smiley face" height="42" width="42" />");   }   }//to add a new element inside  a div I already have:var add;var add=document.createElement("div");var newdiv=add;//in order for the new elements to appear one after another (appendChild):var container;var container = document.getElementById("chata");container.appendChild(newdiv);xmlhttp.open("GET","chatterb.php",true);xmlhttp.send();}..

Thank you very much.

[justsomeguy]

You need to escape the quotes inside the img tag, or use single quotes to surround it. You have the tag surrounded by double quotes and there are double quotes inside the tag which aren't escaped, so they end the string and cause a syntax error. Look at how the forum highlights that code, the entire string should be green but parts are black because it thinks the string ended. That will replace all "t" characters with the img tag, is that what you want?

[dsonesuk]

This is a conversion from php script to javascript if you plan to use multiple emoticons

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*//*--*//*]]>*/</script><style type="text/css">body{background-color:#FFF;}p{margin: 0.5em 0;}.em_icons { position:relative; top:4px; height:1em;}</style><script type="text/javascript">/*<![CDATA[*//*---->*/window.onload=function(){var em_icons = new Array();em_icons[":-)"] = "skype-emoticons-smile.gif";em_icons[""] = "skype-emoticons-smile.gif";em_icons[":=)"] = "skype-emoticons-smile.gif";em_icons[":-D"] = "Skype-emoticons-02-bigsmile.gif";em_icons[""] = "Skype-emoticons-02-bigsmile.gif";em_icons[":=D"] = "Skype-emoticons-02-bigsmile.gif";em_icons[""] = "Skype-emoticons-02-bigsmile.gif";em_icons[":=d"] = "Skype-emoticons-02-bigsmile.gif";em_icons[":-d"] = "Skype-emoticons-02-bigsmile.gif";em_icons[":-("] = "Skype-emoticons-01-sadsmile.gif";em_icons[""] = "Skype-emoticons-01-sadsmile.gif";em_icons[":=("] = "Skype-emoticons-01-sadsmile.gif";em_icons[";-)"] = "winksmile.png";var parent_elem = document.getElementById("content");var content = parent_elem.innerHTML;for(var index in em_icons) {   content = content.replace(index, '<img src="../emotion_icons/'+em_icons[index]+'" alt="'+em_icons[index]+'" />'); }parent_elem.innerHTML=content;}/*--*//*]]>*/</script></head><body><div id="content"><p>I'm flying to Ghana on 27th October and will be there for a month :-D - anyone else going around that time? If so I'd love to hear from you :-) </p></div></body></html>

[breaststroke]

You need to escape the quotes inside the img tag, or use single quotes to surround it. You have the tag surrounded by double quotes and there are double quotes inside the tag which aren't escaped, so they end the string and cause a syntax error. Look at how the forum highlights that code, the entire string should be green but parts are black because it thinks the string ended. That will replace all "t" characters with the img tag, is that what you want?

Hi again. thank you very much.I have tried both ways but it doesn't work.This is what I have tried:

xmlhttp.onreadystatechange=function()   {   if(xmlhttp.readyState==4 && xmlhttp.status==200)   {   newdiv.innerHTML = "<span style='color: #661166;'>"+name+"</span>:"+" "+xmlhttp.responseText.replace(/t/gi,"<img src=\"public_html/imagess/cornerbif.jpg\" alt=\"Smiley face\" width=\"10\" height=\"10\"/>");   }   }var add;  

and:

xmlhttp.onreadystatechange=function()   {   if(xmlhttp.readyState==4 && xmlhttp.status==200)   {   newdiv.innerHTML = "<span style='color: #661166;'>"+name+"</span>:"+" "+xmlhttp.responseText.replace(/t/gi,'<img src="public_html/imagess/cornerbif.jpg\' alt="Smiley face" width="10" height="10" />');   }   }var add;..

I think I did as you suggested. The image root is okay because I have it on another part of the page. I an not planning to replace any "t" with an image, but it is just to test it. I would replace other texts. by the way, I suppose I will have to create an array becuase I wil try to replace several strings. could I create an array on the replace function? thank you very much again Regards p.s. Thank you dsonesuk. I hadn't seen your post before I submitted mine. i will study your code.Thank you so much

[justsomeguy]

The first one will work, but verify that it is actually doing the replacement. If it can't find the image that's another issue, but at least verify that it is replacing "t" characters with the img tag.

[breaststroke]

The first one will work, but verify that it is actually doing the replacement. If it can't find the image that's another issue, but at least verify that it is replacing "t" characters with the img tag.

It doesn't give me anything back (not even other characteres), as if there were some error. I don't know why. The image is found on another part of the page. I don't know what I can do.

[justsomeguy]

Instead of assigning that string to innerHTML just alert it to verify. Make sure you're checking the error console for error messages.

[dsonesuk]

try adding all of, (if its not used anywhere else) //to add a new element inside a div I already have:var add;var add=document.createElement("div");var newdiv=add;//in order for the new elements to appear one after another (appendChild):var container;var container = document.getElementById("chata");container.appendChild(newdiv);into

  if(xmlhttp.readyState==4 && xmlhttp.status==200)   {//to add a new element inside  a div I already have:var add;var add=document.createElement("div");var newdiv=add;//in order for the new elements to appear one after another (appendChild):var container;var container = document.getElementById("chata");container.appendChild(newdiv);//I use the replace function here. If I replace the string with text it works, but it doesn't this way(with an image):   newdiv.innerHTML = "<span style='color: #661166;'>"+name+"</span>:"+" "+xmlhttp.responseText.replace(/t/gi,"<img src="public_html/imagess/corner.jpg" alt="Smiley face" height="42" width="42" />");   }

[breaststroke]

Instead of assigning that string to innerHTML just alert it to verify. Make sure you're checking the error console for error messages.

It works!!!! Thank you so much! It was my fault, once again...As I had been trying several different ways i had left some variables where they shouldn't be. once removed it works fine.It is even amazing to see an image on the div:).Now I have to create an array because it is more than one image that I want to add.I will check dsonesuk's post, which seems to be very useful. thank you

[breaststroke]

dsonesuk, thank you too.I managed to make it work. I was my fault because i had left some variables where they shouldn't be.I am going to try to adapt your code to mine, creating an array. Regards

[dsonesuk]

If you want the original php version let me know