Website Graphic question.

C

CapMorgan

Junior Member

Dec 15, 2007

147

238

• Oct 3, 2008

• #1

I have noticed for a while that there is websites that will use 1 large graphic that contains multiple pieces of a websites graphics. Usually this is seen for navigation portions of the site.

Can someone explain how you only load a portion of a graphic on a website and not the full thing?

Thanks

 

0

00110001

Newbie

Oct 3, 2008

1

0

• Oct 3, 2008

• #2

wow this is such a weird question, you cant just load a portion of a picture dude (well you can hit stop while downloading and some browsers will show only the downloaded portion )

anyway, you need separated images, then you put them all together on your site layout using html.

ps. explain a little more what u need, cause u can use a div with hidden overflow too for displaying only a part of a picture

 

neilparnham

Junior Member

Mar 3, 2008

117

13

• Oct 3, 2008

• #3

im guessing you are talking about slicing up the images?

 

darkmobius

Regular Member

Jul 16, 2008

238

228

• Oct 3, 2008

• #4

yea i don't quite understand either, can you rephrase perhaps

 

C

CapMorgan

Junior Member

Dec 15, 2007

147

238

• Oct 3, 2008
• Thread Starter Thread Starter

• #5

Let's see if I can explain this a bit better.

Normally I would create 2 versions of a button to create a rollover button. These would would be saved as individual graphics, and loaded as individual graphics into the site on the load.

I have seen other sites that will have one graphic that has both buttons side by side in a single graphic. Somehow when you view the site the left half of the button shows until you touch it then it shows the right side half.

I assume that this is done to shave of a bit of load time because only one graphic is being loaded to show 2.

In the extreme I have seen navigation that uses this same technique but will have 15 pieces of a sites navigation in a single graphic but the site loads portions in different places.

edit: just found an example

site: h**p://www.win*customize.com/
graphic: h**p://www.win*customize.com/images/Theme0/featured.header.bg.toppremium.gif

 

Last edited: Oct 3, 2008

C

CapMorgan

Junior Member

Dec 15, 2007

147

238

• Oct 3, 2008
• Thread Starter Thread Starter

• #6

Another example : Yahoo Uses this
graphic : h**p://l.yimg.com/a/i/ww/sp/theme-icons_1.2.gif

 

Last edited: Oct 3, 2008

SharpEdge

BANNED

Aug 16, 2008

65

12

• Oct 3, 2008

• #7

yea that is pretty neat i have never seen this .. i would also like to know

 

caretaker2007

Regular Member

Dec 20, 2007

454

464

• Oct 3, 2008

• #8

Oh.

One graphic can be used.

In your css: A note is that you may have to adjust padding to get everything aligned/adjusted to suit the graphic.

Code:

a.xxxx:link, a.xxxx:visited {
display : block;
background-image : url(yyy.png);
width : 123px;
height : 30px;
}

a.xxxx:hover {
background-position : 0px -30px;  ((shifts down on the graphic 30 pixels))
}

a.xxxx:active {
background-position : -123px 0px;  ((shifts right on the graphic 123 pixels))
}

 

Last edited: Oct 3, 2008

C

CapMorgan

Junior Member

Dec 15, 2007

147

238

• Oct 3, 2008
• Thread Starter Thread Starter

• #9

You also answered another question I just thought of on how to control not just the position but the size of the graphic being used.

Thanks Caretaker

 

a0rta

Regular Member

May 3, 2008

214

100

• Oct 3, 2008

• #10

This isn't so advanced and very practical. Once the image has loaded the switch to the second one will go without any new loading time since it's already loaded too.

for more info about this technique see A List Apart - Sliding doors of CSS II

 

S

soctal

Regular Member

Jul 28, 2008

263

80

• Oct 3, 2008

• #11

i am not sure what you are trying to say, but i believe what you are talking about is called slicing, which graphic programs like photoshop, fireworks or illustrator do to break up and optimize the graphics of a site. here is an excellent tutorial by tutvid on youtube showing slicing;
(something weird happened when i put it in code.)

hxxp://www.youtube.c0m/watch?v=DVfxe4pqvo8

CapMorgan said:

I have noticed for a while that there is websites that will use 1 large graphic that contains multiple pieces of a websites graphics. Usually this is seen for navigation portions of the site.

Can someone explain how you only load a portion of a graphic on a website and not the full thing?

Thanks

Click to expand...

 

Last edited: Oct 3, 2008

caretaker2007

Regular Member

Dec 20, 2007

454

464

• Oct 3, 2008

• #12

I used the link as an example, but, using the background-position you can adjust any image in a div and have the code display everything needed where wanted.

No different than iframe positioning.

Games, your browser, and the such use this positioning method extensively.

Happy to help CapMorgan.

 

C

CapMorgan

Junior Member

Dec 15, 2007

147

238

• Oct 3, 2008
• Thread Starter Thread Starter

• #13

Man what a difference this made. I just did a test on a navigation bar I was putting together. Just so everyone knows, It's load time went from 6 seconds to less then 1 second. I will definetly be using this technique more often

 

B

biglevel

Guest

• Oct 3, 2008

• #14

One way to think about this is that the image loads once, and rollovers will never "glitch" or "delay" cause on the hover, it doesn't need to reload. Instead, it's just moving the position of the image so the new portion shows. It's actually realy brilliant if you think about it. Honestly, I never even would have thought to do this.. I'll be using this for all my hover effects.