1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Website Graphic question.

Discussion in 'BlackHat Lounge' started by CapMorgan, Oct 3, 2008.

  1. CapMorgan

    CapMorgan Junior Member

    Joined:
    Dec 15, 2007
    Messages:
    147
    Likes Received:
    236
    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
     
  2. 00110001

    00110001 Newbie

    Joined:
    Oct 3, 2008
    Messages:
    1
    Likes Received:
    0
    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
     
  3. neilparnham

    neilparnham Junior Member

    Joined:
    Mar 3, 2008
    Messages:
    117
    Likes Received:
    12
    Occupation:
    Anything life throws at me
    Location:
    UK
    Home Page:
    im guessing you are talking about slicing up the images?
     
  4. darkmobius

    darkmobius Regular Member

    Joined:
    Jul 16, 2008
    Messages:
    238
    Likes Received:
    227
    Occupation:
    software developer
    Location:
    canada
    Home Page:
    yea i don't quite understand either, can you rephrase perhaps
     
  5. CapMorgan

    CapMorgan Junior Member

    Joined:
    Dec 15, 2007
    Messages:
    147
    Likes Received:
    236
    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
  6. CapMorgan

    CapMorgan Junior Member

    Joined:
    Dec 15, 2007
    Messages:
    147
    Likes Received:
    236
    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
  7. SharpEdge

    SharpEdge BANNED BANNED

    Joined:
    Aug 16, 2008
    Messages:
    65
    Likes Received:
    12
    yea that is pretty neat i have never seen this .. i would also like to know ;)
     
  8. caretaker2007

    caretaker2007 Power Member

    Joined:
    Dec 20, 2007
    Messages:
    720
    Likes Received:
    454
    Occupation:
    To create income streams
    Location:
    In a 6 by 3 plot
    Home Page:
    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))
    }
    
     
    • Thanks Thanks x 1
    Last edited: Oct 3, 2008
  9. CapMorgan

    CapMorgan Junior Member

    Joined:
    Dec 15, 2007
    Messages:
    147
    Likes Received:
    236
    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
     
  10. a0rta

    a0rta Regular Member

    Joined:
    May 3, 2008
    Messages:
    214
    Likes Received:
    99
    Occupation:
    Travel Agency owner - Recently outsourced my clien
    Location:
    Brazil/Sweden
    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
     
    • Thanks Thanks x 1
  11. soctal

    soctal Regular Member

    Joined:
    Jul 28, 2008
    Messages:
    243
    Likes Received:
    76
    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


     
    Last edited: Oct 3, 2008
  12. caretaker2007

    caretaker2007 Power Member

    Joined:
    Dec 20, 2007
    Messages:
    720
    Likes Received:
    454
    Occupation:
    To create income streams
    Location:
    In a 6 by 3 plot
    Home Page:
    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.
     
  13. CapMorgan

    CapMorgan Junior Member

    Joined:
    Dec 15, 2007
    Messages:
    147
    Likes Received:
    236
    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
     
  14. biglevel

    biglevel Guest

    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.