Is this done with CSS Sprites?

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?

Thank you.

 

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

 

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.

 

Spoiler alert!

The links are simply that, with css.

a {
  opacity: 1;
  }

a:hover {
  opacity: .6;
  }

Code (markup):

gt

 

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?

 

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.

 

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?

 

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.

 

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.

 

Yeah, i noticed it loaded an external file, completely didn't get why it was done that way. Thanks!

 

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.

 

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