Link to home
Start Free TrialLog in
Avatar of rfresh
rfresh

asked on

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

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?

Thanks...
Avatar of de_wagter
de_wagter

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:          http://www.interactivetools.com/products/htmlarea/

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>
</textarea><br>

<script language="javascript1.2">
editor_generate('yourFieldNameHere');
</script>
Avatar of rfresh

ASKER

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...
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...
Avatar of rfresh

ASKER

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?

Thanks...
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 ...


Avatar of rfresh

ASKER

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.

Thanks...
what exacly needs to happen when someone selects (clicks on) one of the pictures in the scrollable list of thumbnails?
Avatar of rfresh

ASKER

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...
<?php  // page thumbnails.php ?>
<table>
<tr><td> <!--left up-->
<iframe src="APageWithAllTheImages.php" width=... height=... border=....></iframe>
</td>
<!-- rest of main page-->
</table>
_____________________________________________

<?php  // page APageWithAllTheImages.php?>
<html>
<body>
<? 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>
<? } ?>
</body>
</html>
_____________________________________________

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

--------------------------------------------------
Please tell me if the purpose is clear, and if you have any problem with this...
ASKER CERTIFIED SOLUTION
Avatar of de_wagter
de_wagter

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial