1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.
  2. Better Analytics for WordPress Get It Free

Single Image + without cut out how can i call in to HTMl page

Discussion in 'HTML & Website Design' started by i_am_dhaval, May 24, 2012.

  1. #1
    Hi

    i have one question

    without cut out i want to call image different part in html

    i am attaching image

    there is lot of icon but i have seen it is possible i do not need to cutout every icon i just call from single image

    how can it will be possible ?

    what method glyphicons-halflings.png it is called ?
     
    i_am_dhaval, May 24, 2012 IP
  2. sooryaglare

    sooryaglare Greenhorn

    Messages:
    27
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #2
    this is called css sprites. You have a one big image with all icons/images in it and position them with css so that only the required image is visible.
    This is done to reduce http request which will improve the page load speed.

    check this http://www.w3schools.com/css/css_image_sprites.asp , this may help.
     
    sooryaglare, May 25, 2012 IP
  3. wiicker95

    wiicker95 Active Member

    Messages:
    437
    Likes Received:
    37
    Best Answers:
    10
    Trophy Points:
    75
    #3
    The above answer is correct. I just want to add something. There are two ways of doing it, though. I prefer the compact one, but choose the best one yourself.

    Let's take the same image you posted the link of :
    [​IMG]

    I need that briefcase icon (the next to last one).

    So I can either write :

    #briefcaseicon {
    background: url(sprite.png) no-repeat -433px -145px;
    width: 12px;
    height: 12px;
    }

    Or :

    #briefcaseicon {
    background-image: url(sprite.png);
    background-repeat: no-repeat;
    background-position: -433px -145px;
    width: 12px;
    height: 12px;
    }



    Choose the version you prefer and enjoy!
     
    wiicker95, May 25, 2012 IP
  4. suave

    suave Peon

    Messages:
    30
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    make sure you are using png's
     
    suave, May 26, 2012 IP
  5. i_am_dhaval

    i_am_dhaval Active Member

    Messages:
    1,328
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    78
    #5
    how can i decided this

    -433px -145px
     
    i_am_dhaval, May 27, 2012 IP
  6. i_am_dhaval

    i_am_dhaval Active Member

    Messages:
    1,328
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    78
    #6
    can anyone give me example like whole website image come fro one layout mins whole webpage come from 1 inmage
     
    i_am_dhaval, May 27, 2012 IP
  7. wiicker95

    wiicker95 Active Member

    Messages:
    437
    Likes Received:
    37
    Best Answers:
    10
    Trophy Points:
    75
    #7
    There's how :

    [​IMG]

    And about the second question, facebook is an answer. However, doing that really isn't recommended, and internet can tell you why.
     
    wiicker95, May 27, 2012 IP
  8. i_am_dhaval

    i_am_dhaval Active Member

    Messages:
    1,328
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    78
    #8
    CAN you give me Facebook image link which they hAVE USES?
     
    i_am_dhaval, May 27, 2012 IP
  9. wiicker95

    wiicker95 Active Member

    Messages:
    437
    Likes Received:
    37
    Best Answers:
    10
    Trophy Points:
    75
    #9
    There you go. Just quote my post if you want to see the links.

    [​IMG]
    [​IMG]
     
    wiicker95, May 27, 2012 IP
  10. Klwo

    Klwo Peon

    Messages:
    17
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #10
    WOW...I didn't know you could do that!
     
    Klwo, May 27, 2012 IP