The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Insert images into textarea, how to insert images into textarea
ethantr
post Oct 27 2007, 12:40 PM
Post #1





Group: Members
Posts: 7
Joined: 27-October 07
Member No.: 4,162



Hi Everyone,

I am trying to create my webpage such that I need to list all the images in a box where there is a scroll bar.
because I am trying to control the box to have a certain size.

For example, if I have a textarea with 100cm X 100cm
and I have 10 images each with the size 50cm X 50cm so the screen can only fit 2 images and in order to view the rest
I can use the scroll bar to slide up or down to view the other images

Thanks in advance for your help

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Oct 27 2007, 01:01 PM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,731
Joined: 9-August 06
Member No.: 6



You can't put images in a text area. You can't put any tags at all there, just plain text.

What you want can be done with a DIV and some CSS.
http://www.w3.org/TR/CSS2/visufx.html#propdef-overflow
If you need a CSS primer...
http://htmlhelp.com/reference/css/
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
ethantr
post Oct 27 2007, 01:10 PM
Post #3





Group: Members
Posts: 7
Joined: 27-October 07
Member No.: 4,162



QUOTE(pandy @ Oct 27 2007, 02:01 PM) *

You can't put images in a text area. You can't put any tags at all there, just plain text.

What you want can be done with a DIV and some CSS.
http://www.w3.org/TR/CSS2/visufx.html#propdef-overflow
If you need a CSS primer...
http://htmlhelp.com/reference/css/








Thank you very much for your replied.
Is there another way to implement this.
Thanks
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Oct 27 2007, 01:22 PM
Post #4


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,731
Joined: 9-August 06
Member No.: 6



What's wrong with this way? It isn't hard, if that's what you are fearing. smile.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
ethantr
post Oct 27 2007, 01:35 PM
Post #5





Group: Members
Posts: 7
Joined: 27-October 07
Member No.: 4,162



Hi Pandy,

Thanks and I tried it it did not have the Js code for

onclick='show("container1");hide("container2")'

so I cant see if it work or not.
Could you please how to implement the jscript?

Thank you very much
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Oct 27 2007, 02:42 PM
Post #6


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,731
Joined: 9-August 06
Member No.: 6



Where did you have it before and what does the JavaScript it calls do?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
ethantr
post Oct 27 2007, 03:10 PM
Post #7





Group: Members
Posts: 7
Joined: 27-October 07
Member No.: 4,162



Hi,

I took your advise and read throught

What you want can be done with a DIV and some CSS.
http://www.w3.org/TR/CSS2/visufx.html#propdef-overflow
If you need a CSS primer...
http://htmlhelp.com/reference/css/

from there i got this code

-----------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<STYLE type="text/css">
<!--
#container1 { position: absolute;
top: 2in; left: 2in; width: 2in }
#container2 { position: absolute;
top: 2in; left: 2in; width: 2in;
visibility: hidden; }
-->
</STYLE>
</HEAD>
<BODY>
<P>Choose a suspect:</P>
<DIV id="container1">
<IMG alt="Al Capone"
width="100" height="100"
src="suspect1.jpg">
<P>Name: Al Capone</P>
<P>Residence: Chicago</P>
</DIV>

<DIV id="container2">
<IMG alt="Lucky Luciano"
width="100" height="100"
src="suspect2.jpg">
<P>Name: Lucky Luciano</P>
<P>Residence: New York</P>
</DIV>

<FORM method="post"
action="http://www.suspect.org/process-bums">
<P>
<INPUT name="Capone" type="button"
value="Capone"
onclick='show("container1");hide("container2")'>
<INPUT name="Luciano" type="button"
value="Luciano"
onclick='show("container2");hide("container1")'>
</FORM>
</BODY>
-----------------


you see in here, this code is calling

<INPUT name="Capone" type="button"
value="Capone"
onclick='show("container1");hide("container2")'>

Javascript onclick='show("container1");hide("container2")'

but in the code this 2 function is no where to be found.

Thanks.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Oct 27 2007, 03:37 PM
Post #8


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,731
Joined: 9-August 06
Member No.: 6



I'm afraid I'm totally confused now. What exactly in the above did you get from the pages I linked to?

I don't understand. Have you copied that from somewhere or is it your own attempts so far? You asked about scrolling images in a box, but the code you posted seems to be about hiding one box and showing another.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
ethantr
post Oct 28 2007, 10:27 AM
Post #9





Group: Members
Posts: 7
Joined: 27-October 07
Member No.: 4,162



Hi Pandy,

Thank you every much for your help.
Basically I am trying to creat a conventional web page where there is a header on the top of the page, and at the middle section,
there is a Menu on the left and content on the right and footer at the bottom of the page.

In the middle section where I have the left menu and content, I am trying to control it with a specific height.
In the left menu that is where I tried to create a menu with a scroll bar and it contains a list of images.
For example, with a specific height, it can only fit 4 images and let say I have 10 images in total so I can use the scroll bar
to see the rest of the image. and each image is a link (ie, <a href="page1.html">page1</a> ) Hopefully I am using the correct terminoloy

Please help, I'd greatly appreicated.
Thank again.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Oct 28 2007, 10:39 AM
Post #10


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,731
Joined: 9-August 06
Member No.: 6



OK, so what I said to start with then. Use CSS and overflow.

Where does the JavaScript come into all this? Could you post a link to what you have now? It doesn't matter if it's broken. It would make it easer to see what you try to do.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
ethantr
post Oct 28 2007, 10:55 AM
Post #11





Group: Members
Posts: 7
Joined: 27-October 07
Member No.: 4,162



Hi Pandy,

I am trying to implement it locally on my computer first.
Once the design is done that I will put it on the server.

Thanks.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
ethantr
post Oct 28 2007, 10:58 AM
Post #12





Group: Members
Posts: 7
Joined: 27-October 07
Member No.: 4,162



Hi Pandy,

Is it possible to create such a Menu with scroll bar?
Thanks
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Oct 28 2007, 11:00 AM
Post #13


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,731
Joined: 9-August 06
Member No.: 6



Oh, well. I'm afraid there isn't much I can do then.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Oct 28 2007, 11:09 AM
Post #14


WDG Member
********

Group: Root Admin
Posts: 8,365
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3



QUOTE(ethantr @ Oct 28 2007, 08:58 AM) *
Is it possible to create such a Menu with scroll bar?

Sure. What didn't you understand from what pandy wrote earlier?

QUOTE(pandy @ Oct 27 2007, 11:01 AM) *
What you want can be done with a DIV and some CSS.
http://www.w3.org/TR/CSS2/visufx.html#propdef-overflow
If you need a CSS primer...
http://htmlhelp.com/reference/css/

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 26th April 2024 - 07:25 AM