Results 1 to 7 of 7

Thread: How are these button images implemented?

  1. #1
    Senior Member RayC's Avatar
    Join Date
    Apr 2010
    Location
    Toronto-ish, Canada
    Posts
    1,731

    Default How are these button images implemented?

    In the NOF MLR, the images for the Tabs, Accordions, etc. have two pieces in one image file. I've just been studying another site for design ideas, and came across the same thing in their menu, except with FOUR pieces; two for regular, and two for highlighted.

    To illustrate, here is the NO Tab Top image:
    Click image for larger version. 

Name:	tab_top..png 
Views:	134 
Size:	1,006 Bytes 
ID:	939
    And the button image for the site I'm evaluating:
    Click image for larger version. 

Name:	bg_button..gif 
Views:	145 
Size:	2.1 KB 
ID:	940

    The image is a button or tab plus a separate end cap of sorts. So how are the pieces from a single file "stitched" together when implemented on a site?
    Ray Cambpell
    Sounds In Sync
    Linked in

  2. #2
    Senior Member mia's Avatar
    Join Date
    Apr 2010
    Location
    Germany /Deutschland
    Posts
    809

    Default

    Ray, it´s basicly the same.

    You think that there are only two pieces in this specific NOF image file, but it´s not true.
    The first tab is blue, and you can see the blue tab piece and the end cap.
    But.... the second one, the highlighted one is white, that´s the reason why you think there are only the blue pieces in this image file.

    Have a look at this film made by paby, it´s going about exchanging the pics for the tabs. She made some stripes for better explanation.
    http://www.paby.de/filme/nof11/tab-top/tab-teil-3.php

    NOF magically stitches them together, so why don´t you give it a go...
    Exchange the picture that you found with the original NOF one and have a look.....
    Last edited by mia; 06-10-2011 at 07:34 PM.
    http://www.nof-community.de
    NOF-Community, Hilfe, Support, Tutorials, Anleitungen, Tipps und Tricks für Netobjects Fusion und SwissKnife Komponenten

  3. #3
    Senior Member RayC's Avatar
    Join Date
    Apr 2010
    Location
    Toronto-ish, Canada
    Posts
    1,731

    Default

    OK. I see now that the NOF one actually has four -- it's just that one is white.

    For one site I did, I actually took one of these NOF images and edited it to modify the colour, then substituted it for the original. I assumed it was an NOF specific thing, so didn't think much of it other than to note how the 2 pieces (times 2 colours) were part of the single image file.

    But now that I see this in another site, presumably not an NOF site, I'm curious: How is this implemented on a site and how do the pieces this get "stitched together"?
    Ray Cambpell
    Sounds In Sync
    Linked in

  4. #4
    Senior Member mia's Avatar
    Join Date
    Apr 2010
    Location
    Germany /Deutschland
    Posts
    809

    Default

    CSS...?
    But don´t ask me how.....
    http://www.nof-community.de
    NOF-Community, Hilfe, Support, Tutorials, Anleitungen, Tipps und Tricks für Netobjects Fusion und SwissKnife Komponenten

  5. #5
    Senior Member Adendum's Avatar
    Join Date
    Apr 2010
    Location
    London (UK) & Granada (Spain)
    Posts
    926

    Default

    Ray,

    They are sprites. One image and css positioning dictates which image or part of the image is seen.
    Paul - Aditerum Ltd and AllSortsOfStuff Ltd
    NOF11 (in Admin mode!); Vista Premium 64bit; AMD Phenom IIx4 945 Processor 3.00Ghz; 8.0Gb RAM
    Wouldn't it be great if there was only a single browser to worry about!!!

  6. #6
    Senior Member RayC's Avatar
    Join Date
    Apr 2010
    Location
    Toronto-ish, Canada
    Posts
    1,731

    Default

    Thanks, Paul.

    I knew someone would know.

    I just did a little reading. Interesting. Not sure it's much of an advantage for smaller sites like I do, but could be worth the effort for a large, complex site.

    Thanks.
    Ray Cambpell
    Sounds In Sync
    Linked in

  7. #7
    Senior Member Adendum's Avatar
    Join Date
    Apr 2010
    Location
    London (UK) & Granada (Spain)
    Posts
    926

    Default

    Ray,

    Well, there are two advantages I can think of for ANY site that uses sprites instead of individual images.
    [1] there is only one http call (to load the one image) rather than one call for each image.
    [2] instant image change as no loading time required (once loaded)...if you get my drift.

    Take www.nutspokerclothing.com as an example. The navigation buttons have three states, so with 6 buttons that makes 18 images - 18 http server requests, 18 downloads. Using the sprite technique that's 1 request and one download. You can see how that works better if you run Firefox with Firebug as you can see the whole image and how the css positioning commands work.
    Paul - Aditerum Ltd and AllSortsOfStuff Ltd
    NOF11 (in Admin mode!); Vista Premium 64bit; AMD Phenom IIx4 945 Processor 3.00Ghz; 8.0Gb RAM
    Wouldn't it be great if there was only a single browser to worry about!!!

Posting Permissions

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