Bustin’ up a .jpg

Topic

New Reply

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

Reply | Quote

Replies

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

Reply | Quote

If you’re talking about pages like this one then it’s done so that they can throw in JavaScript mouse-over functionality and the like.

Reply | Quote

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

Reply | Quote

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 http://www.chachich.com/jpnbike/tripmap.html>page“">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.

Reply | Quote

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.

Reply | Quote

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.

Reply | Quote

Quite right Eileen, I should be more careful.

Reply | Quote

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 http://www.agrip.org and the code follows:

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.

Reply | Quote

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

Reply | Quote

Have you tried CoffeeCup Free Viewer Plus? Go to CoffeeCup Software and click on the download tab. It has the ability to slice pictures and it is free.

The difference between Genius and Stupidity:
A Genius knows their limits.
- Albert Einstein

Reply | Quote

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 this page 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! )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

Reply | Quote