Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17


<INPUT TYPE="image" in a TEXTAREA Tag Help Needed

Posted on 2003-11-18
Medium Priority
Last Modified: 2013-12-13
I'm trying to add images to a TEXTAREA tag using the usual image tag:

<INPUT TYPE="image" etc.

But the images are not showing up in the TEXTAREA but rather outside, below it - I'm trying to display thumbnail images in a scrolling area on the web page so I can insert a variable number of images into the TEXTAREA object - can this be done this way or is there a better way to insert multiple images in a scrolling object for a web page?

Question by:rfresh
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 4

Expert Comment

ID: 9784410
You will need to set up youre textarea to show the html content if you want to see the picture INSIDE... Textareas can NOT contain images, but there are a lot of scripts out there that can seamlesly convert textareas into iframes to show any html content.  Note that this is only possible in MS Internet explorer 5>
(you are probably aquainted with web-based email providers that allow to send html mails using something that looks like a textarea, but in fact it has been converted into an iframe using javascript)

One of those scripts, among many others is the free one from:

After simply including the script you suddenly can use any html inside your textarea like this:

<textarea name="yourFieldNameHere" style="width:800; height:150">
  <p>Here is some sample text: <b>bold</b>, <i>italic</i>, <u>underline</u>. </p>
  <p><img scr="./pictures/picture1.jpg"></p>

<script language="javascript1.2">

Author Comment

ID: 9784667
Thanks for this info - my php web site has to support NS to - so while I will keep this idea in mind, I want to continue to look for a solution that will work in both IE and NS.

Thanks again...

Expert Comment

ID: 9784882
Well, as I said, unfortunately textareas can not display images in it, so if you want to have something that can scale up (scroll) inside your page and show many html items (pictures) inside you will have to look at either a FRAME (or IFRAME=frame inside a page) or you will have to use higher level tools like JAVASCRIPT or even better: FLASH. You can also use stylesheets to put background pictures in your textbox.

My personal choice, since you ask this question in the PHP forum would ofcoarse be to use paging to nicely display the pictures with only e.g. 10 pictures a page to keep is goodlooking and use prev 1 2 3 4 5 ... next to navigate between pages (like search engines)

If you want help on the design using frames, or want to give the paging a try don't hesitate to ask. Sollutions with javascript and Flash are not as straight forward.

using the <input type="image" ...> tag generates a submit-kind of button using the image you gave it. this button will be outside your textarea, so I'm a bit confused why you tried inputs tags inside your textarea...

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.


Author Comment

ID: 9785034
Well, it looks like iFrame will do what I need.

I have 4 tables on one web page - the first table is where I need the iFrames to display scrollable thumbnail images - they are of the <input type="image" because I want to be able to click on an image to call another web page.

For now I just trying to get the images to display using an <IMG tag but it doesn't display - here is the line that displays the iFrame correctly with the correct iFrame width and height but the image does not display within the iFrame:

<IFRAME IMG SRC='<IMG SRC="<?php echo "uploads/".$php_photo_file?>">' WIDTH="350" HEIGHT="300"></IFRAME>

I checked the image filename and it's on the server so I must be missing something in the above line that makes the image not render?


Expert Comment

ID: 9786754
First notice that IFRAMES only work in netscape 6 or higher...

second, the source (<iframe src="APageWithAllTheImages.php") of the iframe should be a link to a page and not the actual html contents...

Hope this helps ...


Author Comment

ID: 9789355
Hmmm...I see - I'm trying to build this web page dynamically - so in that case, I would need to actually build the images on, say, images.php and *then* use images.php inside iframe...right?

How would I build <IMG tags on images.php that is not being shown but rather just prepared to be used by another (iframe enabled) web page?

What my web page is trying to do is display thumbnail images in 1/4th of the web page - I'm using 4 tables to evenly divide the web page into 4 sections - the upper left section is holding the iframe with the images - since the area is small (25% of the page) I need to be able to scroll to see all the images.


Expert Comment

ID: 9810461
what exacly needs to happen when someone selects (clicks on) one of the pictures in the scrollable list of thumbnails?

Author Comment

ID: 9812125
The images represent people who have sent a private message to the person viewing the thumbnails - the .php page they are viewing I call thumbnails.php. When they click on one of the images I then call pm_dispatcher.php and that file determines what the user clicked on in thumbnails.php and calls the appropriate .php file, in this case, it calls private_messages.php where they can access and read their private messages.

I now understand that I would have to actually build the images in a separate .php file and *then* call that file inside the iframe code of thumbnails.php - I've only been working with .php for 6 months or so, so I am not that good yet.

This is all being done dynamically and having the images already built in another .php file ready to be used is probably what the iframe primary is to be used for - I'm not sure how well it would work for dynamically generated thumbnails - at this point I need some pointers on how to build the thumbnails in a separate .php file - I mean, I know how to build the thumbnails themselves; I'm just not sure how to do this when thumbnails.php is being built back on the server - by that I mean, the thumbnails.php page is the page where the iframe is being used - so if I'm building that page back on the server how do I also make the thumbnails on another .php page to be used by thumbnails.php with the iframe component?

Thanks - I hope this isn't too confusing...

Expert Comment

ID: 9815115
<?php  // page thumbnails.php ?>
<tr><td> <!--left up-->
<iframe src="APageWithAllTheImages.php" width=... height=... border=....></iframe>
<!-- rest of main page-->

<?php  // page APageWithAllTheImages.php?>
<? mysql="SELECT *.* FROM contacts WHERE ... " ....
while() {?>
<!-- show all the images here -->
<a target="_parent" href="./pm_dispatcher.php?argument=value"><img border="0" scr="./$img.gif"></b><br>
<? } ?>

// page pm_dispatcher.php
// switch using $REQUEST["argument"]

Please tell me if the purpose is clear, and if you have any problem with this...

Accepted Solution

de_wagter earned 500 total points
ID: 9815148
add following to: APageWithAllTheImages.php
    <base target="_parent">


    <base target="_top">

... so you don't have to put the target="_parent" in every hyperlink, and schrink your code.

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Foreword (July, 2015) Since I first wrote this article, years ago, a great many more people have begun using the internet.  They are coming online from every part of the globe, learning, reading, shopping and spending money at an ever-increasing ra…
Many old projects have bad code, but the budget doesn't exist to rewrite the codebase. You can update this code to be safer by introducing contemporary input validation, sanitation, and safer database queries.
The viewer will learn how to count occurrences of each item in an array.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

721 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question