MozillaZine

How to display an image in a textarea?

Discuss how to use and promote Web standards with the Mozilla Gecko engine.
youpa
 
Posts: 4
Joined: February 1st, 2007, 11:14 pm

Post Posted February 1st, 2007, 11:46 pm

Hello,

I attempted to display an image in a textarea. After some searches, I learned that below codes might work,

<textarea></textarea>
<Script>
var oImg=document.createElement("IMG");
oImg.src="http://tw.i4.yimg.com/i/tw/hp/spirit/yahoo_logo.gif";
test.appendChild(oImg);
</Script>


it does work in IE 6, however, fails in my Firefox 1.0.0.1.

Do you have any idea? Kindly advise, thanks a lot.


--
youpa

jscher2000

User avatar
 
Posts: 10077
Joined: December 19th, 2004, 12:26 am
Location: Silicon Valley, CA USA

Post Posted February 2nd, 2007, 1:25 am

Should a <textarea> display an image? I don't really think so, but maybe I'm narrow-minded.

I'm not sure your code is complete there. The MozillaZine Forum parser removes attributes from HTML code. To prevent that, check the box to "Disable HTML in this post" (this checkbox is above the Preview button in the more full-featured compose screen you see after choosing Quote or after your initial preview of quick reply). You can use the Preview feature to check that it worked prior to posting. And of course your code will lay out better if you surround it with the BBCode [code] and [/code] tags. :-)

youpa
 
Posts: 4
Joined: February 1st, 2007, 11:14 pm

Post Posted February 2nd, 2007, 2:16 am

OK, below is the complete codes. Just save them into a .html file and you will see it works in IE but not in Firefox.

<textarea id="test" rows="10" cols="40"></textarea>
<Script Language="JavaScript">
var oImg=document.createElement("IMG");
oImg.src="http://tw.i4.yimg.com/i/tw/hp/spirit/yahoo_logo.gif";
test.appendChild(oImg);
</Script>


And, Should a <textarea> display an image? Well, my page will be quite friendly if I can implement this feature. Besides, the blog software wordpress, with HTML editor TinyMCE, could display images in its <textarea> very well.

jscher2000

User avatar
 
Posts: 10077
Joined: December 19th, 2004, 12:26 am
Location: Silicon Valley, CA USA

Post Posted February 2nd, 2007, 2:36 am

This type of element reference:
Code: Select all
test.appendChild(oImg);

doesn't usually work in Firefox. Try:
Code: Select all
document.getElementById("test").appendChild(oImg);

instead. Any luck?

youpa
 
Posts: 4
Joined: February 1st, 2007, 11:14 pm

Post Posted February 2nd, 2007, 3:03 am

Hello, problem persists with the revised code. Any further suggestion? Thanks!

Mordwin
 
Posts: 653
Joined: June 8th, 2005, 6:10 am

Post Posted February 2nd, 2007, 4:22 am

I'm not sure that's remotely valid HTML

Code: Select all
<!ELEMENT TEXTAREA - - (#PCDATA)       -- multi-line text field -->


No child elements appear to be permitted, just parsed character data (i.e. entities are parsed).

AlfonsoML
 
Posts: 384
Joined: September 6th, 2006, 1:39 pm

Post Posted February 2nd, 2007, 7:04 am

youpa wrote:And, Should a <textarea> display an image? Well, my page will be quite friendly if I can implement this feature. Besides, the blog software wordpress, with HTML editor TinyMCE, could display images in its <textarea> very well.


That's not a textarea, that's a full iframe with editing capabilities. You can add any html element to such iframe, but a textarea as its name states is aimed just for text.
If you need to add an image then use one such html editor (TinyMCE, Xina, FCKeditor) instead of trying to do with a textarea what can't be done.

youpa
 
Posts: 4
Joined: February 1st, 2007, 11:14 pm

Post Posted February 2nd, 2007, 9:07 am

It's ok, thanks for the explanation.

I will try to find some iframe material.

AlfonsoML
 
Posts: 384
Joined: September 6th, 2006, 1:39 pm

Post Posted February 2nd, 2007, 10:39 am

You don't need to find, just use one of those editor, the three are free and opensource.

antonyfal
 
Posts: 1
Joined: August 2nd, 2015, 11:25 am

Post Posted August 2nd, 2015, 11:27 am

hey sure its late but i found this great plugin it allows changing the cursor, adding animated images, video links, images and and and
http......youtu.be/Jf_FqbzJlrI there is a download link, its a pay plugin, but well worth the price, comes with thousands of icons and animated aicons saves tons of work
Last edited by LIMPET235 on August 2nd, 2015, 11:34 am, edited 1 time in total.
Reason: Killed the link.

LIMPET235
Moderator

User avatar
 
Posts: 37595
Joined: October 19th, 2007, 1:53 am
Location: The South Coast of N.S.W. Oz.

Post Posted August 2nd, 2015, 11:35 am

Thanks but just a tad late.

Locking this oldie.
Ancient Amateur Astronomer
Win-7-HP/IntelĀ® DualCore-2.0GHz/500G HDD/4 Gig Ram/550Watt PSU/350WattUPS/Firefox-20.0-56.0.1/T-bird-2.0.0.24/SnagIt-v10.0.1/MWP-7.11.0.
RadioYachting.
(Always choose the "Custom" Install.)

Return to Web Development / Standards Evangelism


Who is online

Users browsing this forum: No registered users and 1 guest