Results 1 to 12 of 12
  1. #1
    KTYorke
    Guest

    Bustin' up a .jpg

    I'm creating a web page that (among other things) has one large graphic on it...

    I've seen pages that, when I first load the page it looks like there is a bunch of graphics on the page... (a bunch of boxes with the little graphic symbol in the top left of the box - see chris greaves' user pic-) once it's done loading however, it looks like one picture. (I'm not talking about intentionally making it do that... it's just that on a slower connection a smaller piece of the graphic loads faster than another larger one.)

    I guess I want to know how to bust up a large graphic into say 4 smaller pieces then when it's all done loading, displays it as if it were one graphic for quicker loading. (I'm not really sure if this is effective to speed load time... I'm just assuming that's why it's done, is it?) I just hate waiting for a graphic to load one line at a time from top to bottom.

    Is there a special app. that can do this well? Or can I use Photoshop?

    thanks
    have fun

  2. #2
    Plutonium Lounger Leif's Avatar
    Join Date
    Dec 2000
    Location
    U.K.
    Posts
    14,010
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: Bustin' up a .jpg

    I always assumed that was a 'side-effect' of seamless frames (but could just be my total ignorance).
    If you can imagine a typical 3 frame page: header, left menu and main frame, with a graphic covering the junction of all three....

  3. #3
    Star Lounger
    Join Date
    Jan 2001
    Location
    Michigan, USA
    Posts
    75
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: Bustin' up a .jpg

    If you're talking about pages like <A target="_blank" HREF=http://www.efax.com/>this one</A> then it's done so that they can throw in JavaScript mouse-over functionality and the like.

  4. #4
    KTYorke
    Guest

    Re: Bustin' up a .jpg

    I thought of that as a possibility too... but I'm not sure either... I've seen them where they are not symertrical as in a frame. And I don't want it to go across the entire page... I just want it for one square .jpg with text above and below.

    I have found an example though... the Dale Earnhardt Tribute photo at the top of <A target="_blank" HREF=http://www.nascar.com/DRIVERS/winston/DEarnhar00/tribute/index.html>this page</A> is in a table. But one of my main problems is that I'm not really sure what I'm looking at in the code... (I am NOT versed in Java at all! [img]/S/sad.gif[/img])that and I still don't know how they cut up the pic and put it back together so well... I guess I just really have to play for that...
    thanks
    have fun

  5. #5
    KTYorke
    Guest

    Re: Bustin' up a .jpg

    AAAAHHH!!!! That's it!! and yes, I may want to do it for mouse over stuff...

    Do you know how to do that?? or know a place where I can learn how to do that... I don't even know what it's called so I can't even search for it!!

    thanks!!!
    have fun

  6. #6
    Star Lounger
    Join Date
    Jan 2001
    Location
    Michigan, USA
    Posts
    75
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: Bustin' up a .jpg

    I don't see any advantage in doing it the way they did on the Dale Earnhardt page except your initial rationale (though I would think breaking it up would cause the page as a whole to take a tad longer to load).

    You can use the javascript.internet.com. That is where I got started (the script I modified for my page is this one: http://javascript.internet.com/messages/de...ion-layer.html). Even though I hadn't used JavaScript before, I have some advantage over some others in that I'm a programmer by trade.

    As far as breaking up the image itself, it should be easy to accomplish in PhotoShop or any graphics software.

    [img]/S/flatcat.gif[/img]

  7. #7
    Super Moderator
    Join Date
    Jan 2001
    Location
    Melbourne, Victoria, Australia
    Posts
    3,852
    Thanks
    4
    Thanked 259 Times in 239 Posts

    Re: Bustin' up a .jpg

    Most web sites that do this "Splicing" (look up that term) use software to do it automatically. These tools give the ability to design the page with a big image and add rollovers etc. Then when you save the file to web and the big image is broken into a number of components which butt together to make the final picture and provide the rollovers and mouseovers.

    Macromedia's Flash/Fireworks/Dreamweaver suite is the leading software with Adobe's GoLive/LiveMotion playing catch-up. Both use Java to encode the functionality into the pages. You could do this code by hand but who's got the time.
    Andrew Lockton, Chrysalis Design, Melbourne Australia

  8. #8
    Silver Lounger
    Join Date
    Dec 2000
    Location
    Los Angeles, California, USA
    Posts
    1,734
    Thanks
    0
    Thanked 3 Times in 1 Post

    Re: Bustin' up a .jpg

    I'm surprised that you, as a designer, would make the mistake of referring to Javascript as Java! The two have absolutely nothing in common other than the unfortunate similarity of name.
    <IMG SRC=http://www.wopr.com/w3tuserpics/Eileen_sig.gif>

  9. #9
    Super Moderator
    Join Date
    Jan 2001
    Location
    Melbourne, Victoria, Australia
    Posts
    3,852
    Thanks
    4
    Thanked 259 Times in 239 Posts

    Re: Bustin' up a .jpg

    Quite right Eileen, I should be more careful.
    Andrew Lockton, Chrysalis Design, Melbourne Australia

  10. #10
    New Lounger
    Join Date
    Jun 2003
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: Bustin' up a .jpg

    KTYorke,

    Not sure if this is what you are trying to do but I use Fireworks (macromedia), although there are tons of other products out there, to slice images. One that you could view is located here <A target="_blank" HREF=http://www.agrip.org>http://www.agrip.org</A> and the code follows:

    <table BORDER="0" CELLPADDING="0" CELLSPACING="0" WIDTH="448">
    <tr>
    <td>[img]images/poster-01-01.jpg[/img]</td>
    <td>[img]images/poster-01-02.jpg[/img]</td>
    <td>[img]images/poster-01-03.jpg[/img]</td>
    </tr>
    <tr>
    <td>[img]images/poster-02-01.jpg[/img]</td>
    <td>[img]images/poster-02-02.jpg[/img]</td>
    <td>[img]images/poster-02-03.jpg[/img]</td>
    </tr>
    <tr>
    <td>[img]images/poster-03-01.jpg[/img]</td>
    <td>[img]images/poster-03-02.jpg[/img]</td>
    <td>[img]images/poster-03-03.jpg[/img]</td>
    </tr>
    </table>

    Basically it is just using tables and the key is to set the border equal to 0.

    Hopefully this helps.

    I attached the text file at the left, it is the html source of the table above.
    Attached Files Attached Files

  11. #11
    KTYorke
    Guest

    Re: Bustin' up a .jpg

    a few things on the home front have been keeping me from my little project but I'll post a link when I have a finished product. I don't have Fireworks at home and this is something I can't do at work at lunch. (know of a free program that can do this?) Thanks for the suggestions... I can't wait to try them!!
    have fun

  12. #12
    3 Star Lounger
    Join Date
    Jan 2001
    Location
    Phoenix, Arizona, USA
    Posts
    265
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Re: Bustin' up a .jpg

    Have you tried CoffeeCup Free Viewer Plus? Go to <A target="_blank" HREF=http://www.coffeecup.com>CoffeeCup Software</A> and click on the download tab. It has the ability to slice pictures and it is free.
    Ed
    "Somebody left the cork out of my lunch." - W. C. Fields

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •