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.

Is this done with CSS Sprites?

Discussion in 'CSS' started by serialentre, Apr 8, 2015.

  1. #1
    Hi all,

    Came across this website. http://www.puma-nightrun.com.tw/

    At the bottom, there are a few rows of companies' logos and they link to the respective companies website or facebook page.

    Is this achieved with CSS Sprites? Can someone briefly share how that is done?
    SEMrush
    Thank you.
     
    serialentre, Apr 8, 2015 IP
    SEMrush
  2. kk5st

    kk5st Prominent Member

    Messages:
    3,499
    Likes Received:
    377
    Best Answers:
    29
    Trophy Points:
    335
    #2
    It is css. It is not sprites. Did you not inspect the html and css sources?

    Please do your due diligence before posting. See How To Ask Questions The Smart Way.

    cheers,

    gary
     
    kk5st, Apr 8, 2015 IP
    COBOLdinosaur likes this.
  3. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #3
    It's basically an image-map - look it up. It's one big image, with links assigned with coordinates. It's also completely useless if a user have images turned off (but it will work with a screen-reader, as the map-tags will show, ASFAIK) It's also not displayed if you have adblock on, btw. ;)
     
    PoPSiCLe, Apr 8, 2015 IP
  4. kk5st

    kk5st Prominent Member

    Messages:
    3,499
    Likes Received:
    377
    Best Answers:
    29
    Trophy Points:
    335
    #4
    Spoiler alert!

    The links are simply that, with css.
    a {
      opacity: 1;
      }
    
    a:hover {
      opacity: .6;
      }
    Code (markup):
    gt
     
    kk5st, Apr 8, 2015 IP
  5. serialentre

    serialentre Member

    Messages:
    123
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    30
    #5
    Hi kk5st,

    I noticed that its a big collection of images and instantly assumed that its CSS sprites(but I've not used this method prior to this). After you mentioned it, I looked further down the HTML and noticed that map coordinates. Apologies! And thanks for adding in the CSS portion, appreciate it!

    Thanks PoPSiCLe for pointing out the fact that this method is not perfect. I wonder why the web development used map coordinates.

    Is there a better way of doing it?
     
    serialentre, Apr 8, 2015 IP
  6. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #6
    A simple way of doing it would just be a list of links with images - ie an unordered list, with floats or positioning to make it fit as one wanted, and with a fallback if images is turned off. Given the text (which I can't read) next to the images, I'm sort of not really understanding what it is for - I mean, if you're gonna post logos, you normally just post logos, not text as well (but it might be something specific to the site - I don't read the language). However, purely code- and load-wise, it makes sense using one picture - fewer requests, and the picture is probably not very large, making it load fast.
     
    PoPSiCLe, Apr 9, 2015 IP
  7. serialentre

    serialentre Member

    Messages:
    123
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    30
    #7
    Oh yes, ordered list would be good.

    The texts states the level of sponsorship of the companies.

    I am pretty puzzled by how the developer put the entire logos box inside an iframe. Do you know why the reason is?

     
    serialentre, Apr 9, 2015 IP
  8. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,376
    Likes Received:
    1,853
    Best Answers:
    245
    Trophy Points:
    515
    #8
    Was going to post this question yesterday but got distracted --- but WHAT LOGO'S?!?

    I'm not seeing anything on that page remotely resembling what's being discussed.
     
    deathshadow, Apr 9, 2015 IP
  9. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #9
    Do you have adblock on? Scriptblocker? One of those might interfere.
    As for the iframe-question, it seems it's some sort of stupid way of loading an external file (sponsors.html) into the regular page. Not sure why they've chosen to do it this way, but then I don't understand the choices on that webpage to begin with, so no idea. There's no reason for it.
     
    PoPSiCLe, Apr 9, 2015 IP
  10. serialentre

    serialentre Member

    Messages:
    123
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    30
    #10
    Yeah, i noticed it loaded an external file, completely didn't get why it was done that way. Thanks! :)
     
    serialentre, Apr 9, 2015 IP
  11. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,376
    Likes Received:
    1,853
    Best Answers:
    245
    Trophy Points:
    515
    #11
    Do I look like a ***ing re-re? OF COURSE I'm running an adblocker. You mean there are people doing web development DUMB ENOUGH not to be running one?!?

    Oh wait, I forgot the sleazy scam artists who are here FOR that BS.
     
    deathshadow, Apr 9, 2015 IP
  12. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #12
    No, but it might be wise to turn it off if you're trying to figure out something about an unknown site. Since ads often break the design of the page because of crappy code (even worse than the code for the page itself) - hence, if something doesn't show up, I try without adblock, and see if it shows - if it still doesn't, I usually just don't give a f*ck and move on ;)
     
    PoPSiCLe, Apr 9, 2015 IP