On Fri, 8 May 1998, stanleysupport wrote:

> Hi Collin,
> I visited the site that this original post was about, and I did see
> something spectucular compared to the site of the url that you posted. I
Haha.. did you move your mouse over the little bar of horizontal lines?
Neat idea, even if they did the table wrong (there is whitespace
interfering with the table layout)

> shocked to see that a photograph with many different colors would load
> so much faster than the logo image that you have displayed on your url.
> I am just learning about graphics, so dont take any offense to this. I
> am curious to why this is?? Anyone have any input, please inform.
> Thanks.

The reason the hoopla.com site loads so much quicker than the other one
has nothing to do with the amount of color in the pictures.
It is simply because the other site has javascript that loads MUCH more
than what you initially see on the screen.  Then, when you move your mouse
over the little vertical bar of stripes, those images are swapped for the
little circle with "thumbnail" in it.

Frankly, I don't know why the hoopla.com site went with the GIF format,
when the JPG format would probably have given a much better result with
perhaps only a slight size increase, but that is beside the point.

The whole question of the original post was basically "How did they do
that?" So here is the answer to the ORIGINAL question :)

To make a multipart image "seamless" on a page, you simply follow three
steps:

1. Make the original image

2. Split the image however you want it, saving each section as its own
   image

3. Piece those images together using tables (NOTE: tables are not always
   necessary.. the hoopla.com site uses tables to line the images up, but
   it could have just as easily been done without them)

For step 2, you can either manually split the image into little sections
yourself (oh, what fun!) Or you can search for a program that will do it
for you (I think Fireworks from Macromedia does it)

Here's how I do it (In Photoshop 4.0):

 a) Make a copy of your original in either a new layer or a new image.
 b) For contrast to help you see what you are doing, create a new layer
    BEHIND the image layer.. fill it with some highly contrasting color..
    like bright pink.
 c) Select the area you want to be the first sub-image
 d) Select Layer->New->Layer via CUT
 e) Toggle the new Layer's visibility.. you should see the original image
    with the section you just copied filled in with pink.
 f) repeat the process until you have all the different sections housed in
    their own layers.
 g) select the entire viewable area (Ctrl-A)
 h) Choosing each layer in turn as the current layer, copy the entire
    viewable area and paste it to a new file (It should automatically crop
    to just whatever selection was copied to that layer.
 i) Save each section of the image to a separate filee (keep track of
    what  you save where.

For step 3, simply place the images in a table, if applicable, or just use
<IMG> and <BR> tags.. IE:
<IMG SRC="img1.gif"><IMG SRC="img2.gif"><BR><IMG
SRC="img3.gif><IMG SRC="img4.gif"><BR>
would stack two sets of two images on top of each other.

Pat



> 
> Cindy 
> 
> Collin Lim wrote:
> > 
> > I must be missing the point.  I checked out that site and did not find
> > anything unusual or spectacular.  It is simply one image split into four
> > and displayed in a way that they appear to be one image.  You saw the
> > images sequentially came together as one because they loaded slowly over
> > the Internet.  You said you copied the HTML and images and the images
> > came together very quickly.  That's probably because your harddisk is
> > much quicker than the Internet connection.
> > 
> > If you're interested with split images, checkout this site:
> > 
> > http://members.xoom.com/burleson/photo/zgalsel.html
> > 
> > -Collin
> > 
> > ==============================
> > 
> > This morning in my local paper there was a recommended
> > URL that is following. The reason I am bringing it up here
> > is that I think it a URL that concerns itself with split
> > images and  the source code is not complicated. I am interested
> > in knowing how the image was split into four parts as it
> > opened, then how it sequentially came together as one
> > image.
> > 
> > If you don't think an analysis of this site would be interesting
> > for the thread,  then I understand. I copied the HTML and the
> > images, but it just came together as one picture very quickly.
> > Nothing like the site depicts.
> > 
> > It is also a cute, simple and warm little story, but I think a
> > technique could be learned from the "how" of it..
> > 
> > The URL is:
> > 
> > http://www.hoopla.com/
> > 
> > ______________________________________________________
> > Get Your Private, Free Email at http://www.hotmail.com
> 

HWG: hwg-graphics mailing list archives, maintained by Webmasters @ IWA