58 Comments
- tominabox1, on 10/10/2007, -1/+35looks like good info, too bad the headline is impossible to read.
- dolemite5005, on 10/10/2007, -0/+22Dugg for the hot chick in the example.
- slamtv7, on 10/10/2007, -0/+12Sure it's great. The entire page reloads for each image, that's not that great. It would be better if he used this technique and also used some JS to call the image and not an entire page, but if the browser had JS turned off, just fall back to plain CSS.
- Tabou, on 10/10/2007, -0/+11Why did you think it's relevant to include "Pup Inc" in the title? As if it was a famous thing that could add more credibility to the article. And what the hell are browers?
- DJNephilim, on 10/10/2007, -0/+10Worst. Headline. Ever.
It took me nearly a full minute to figure out what the hell it was trying to say. What is an "Arrow Over Lay Screen Shot Browers(sic)"? Overlay is ONE WORD, and hyphenate Screen-shot or make it one word. FFS, make this ***** legible! - SkippyDoorknob, on 10/10/2007, -0/+10In this day and age, if you have Javascript disabled then you're going to have a LOT of broken websites.
- Dracos, on 10/10/2007, -1/+11FAIL!
"filter" is IE only. "opacity" works in everything else. Stop pandering to the worst browser, force MS to catch up to 2007. - kurtwinter, on 10/10/2007, -0/+9WTF is a Brower? And a lay screen?
- partialinfinity, on 10/10/2007, -0/+9I've re-read it about five times and I still don't understand it... luckily the description was half decent.
- VeganG, on 10/10/2007, -0/+7I think the headline is what needs explaining.
- mrbad101, on 10/10/2007, -0/+6That would require JS to accomplish. The goal of this example is how to pull this off with purely CSS.
- Tabou, on 10/10/2007, -0/+6You lost me at flash!
- inactive, on 10/10/2007, -1/+7Or, you could just use some cool javascript like Lightbox and variants and save a TON of time. Honestly, I don't see why people are trying to avoid javascript outright these days.
- danwallace, on 10/10/2007, -0/+6Works fine for me.
- inactive, on 10/10/2007, -0/+5Ever use Jquery? Mootools? It couldn't be any simpler.
- anthropocentric, on 10/10/2007, -0/+5That girl is really cute
- mrbad101, on 10/10/2007, -2/+72007? Moz has had this since its early days. Lets have MS catch up to about 2003.
- Shinglor, on 10/10/2007, -0/+5That's an amazingly good photo, anyone know where it came from?
- racekarl, on 10/10/2007, -2/+7While nifty, this seems pretty poor from a usability point of view. The main problem with this technique is that it's not immediately obvious how to navigate to the next picture, or even that you can in fact navigate to other images. Furthermore, the controls obscure the image, which seems pretty dumb since the whole point of this is to view an image. Finally, the controls won't appear the same over every image (e.g. dark backgrounds wash out the button)
- merrickx, on 10/10/2007, -0/+4Warning:
You must click the link to understand the title. - DeQuinceysDiet, on 10/10/2007, -2/+5She's kinda byooteeful. I'd like to navigate on her face. Oh wait I just did. I'll shut up now.
- themuffinman, on 10/10/2007, -0/+3Works for me in Safari 3.0b / mac.
- danwallace, on 10/10/2007, -2/+5It doesn't need to be immediately obvious if it catches on. I've seen this on quite a few sites lately and now it's just something I look for. We don't need to cater to stupid people, hidden controls are a good thing. Secondly, they don't obscure the image at all. Keep your mouse off the picture. Wham! No controls. And finally the controls are a white arrow over a black square. Whether the image is dark or light, you'll be able to see the controls without issue.
- Ravatar, on 10/10/2007, -1/+3Chris, is that you?
- Str8Dog, on 10/10/2007, -1/+2I fail at life... :(
- natch, on 10/10/2007, -0/+1[oops, this was meant as a reply to danwallace]
Just curious... does clicking on the arrow take you to the next image? I'm not talking about what you expect to happen with this UI, but what actually happens today in your browser on the demo page. Do you see the next image when you click on the arrow? I expect to see the next image, but it doesn't show up when I click. I'm using Firefox 2.0.0.6. - natch, on 10/10/2007, -0/+1Just curious... does clicking on the arrow take you to the next image? I'm not talking about what you expect to happen with this UI, but what actually happens today in your browser on the demo page. Do you see the next image when you click on the arrow? I expect to see the next image, but it doesn't show up when I click. I'm using Firefox 2.0.0.6.
- natch, on 10/10/2007, -0/+1I like kmarius's thinking here.
Give the people with JS turned off a great experience, but for those people with JS on, no harm in providing an even better experience. The best of both worlds: degradability, plus taking advantage of the good things JS has to offer.
True the point of the web page was to show a CSS-only solution. That's great, but in the real world, a hybrid solution will be even better. I'm not dissing this solution. I'm just looking forward to reading more ideas about how this could be even better (and still degradable) with a bit of JS thrown in for those users who have it enabled. Maybe in the author's next article. There are some great insights in the comments here too.
(Ironic how the Firefox NoScript extension popped up a "script denied" alert bar when I accessed this "no Javascript" site. I assume the JS is being used for something else, analytics maybe.) - sintaks, on 10/10/2007, -0/+1I don't understand how this is any "better" than the technique used in good ol' Lightbox 2. The only thing the JS is for is to located the lightboxed images, and do the actual lightboxing effect... the overlays are done identically. Just have a peep into the lightbox.css file and look for :hover.
- nutzngum, on 10/10/2007, -0/+1power pc or intel? I'm on a g5 Imac which is completely up-to-date (as of this morning ) and it's not working in safari for me either...good thing I have firefox installed, I guess...
- natch, on 10/10/2007, -0/+1Is it just me, or does this web site intended to show an image-to-image navigation UI implementation have only one image?
I understand it's showing the arrows, and that's very nice, but am I to believe that they work without JavaScript without seeing the navigation in action? - CatCubed, on 10/10/2007, -0/+1Maybe we don't want to use lightbox because it really slows down your site load. The main lightbox2 takes three script calls and one css call which weighs in at over 100KB total.
- kmarius, on 10/10/2007, -1/+1Sure, but if you want functionality CSS doesn't provide, why not use Javascript for that one functionality? It's not as if he would replace the existing CSS. Users could still see the arrows if they don't have Javascript turned on.
- bpmox, on 10/10/2007, -2/+2thank you racekarl for considering usability! It's all moot if it's not functional.
- natch, on 10/10/2007, -1/+1Yes, where is the down arrow? More please...
- inactive, on 10/10/2007, -3/+3I thought javascript wasn't the most elegant language? Now you're suggesting it?
- rgurganus, on 10/10/2007, -0/+0not only worst headline ever, but the article's not much better. I couldn't get the arrows to do anything in IE6, IE7, FF, or Opera. If they're not supposed to function in this demo, then it's a bad design for demo'ing buttons that don't function. Second, someone said it's IE-only. Anything that's not cross-browser should not be used to begin with, unless you provide equivalent solutions for other browsers.
- pupismyname, on 10/10/2007, -0/+0The arrows are the demo. The tutorial isn't on creating a fully functional slideshow, it's on how to create the prev/next controls.
As far as I know, it works in Firefox, IE5+, Safari on Windows, and Opera 9+. - pupismyname, on 10/10/2007, -0/+0The demo isn't meant to be a slideshow. It's meant to demonstrate the arrow hovers. If the arrows show up then it's working properly.
- mrbad101, on 10/10/2007, -4/+32007? Moz has been doing this since its earlier days. How about we force MS to catch up to 2003.
- caerwyn, on 10/10/2007, -4/+3I'd be more impressed if it actually worked in safari.
- Str8Dog, on 10/10/2007, -2/+1Damn I really did butcher that headline... Sorry Pup. I mention Pup Inc specifically because he has had other tutorials of this sort gain mass exposer.. see http://www.pupinc.com/boxflowhack/
- Ravatar, on 10/10/2007, -2/+1I'll help.
- mrbad101, on 10/10/2007, -4/+3LOL, I fail for double posting, and not even wording it exactly the same way. I'll dig myself down now.
- Foxsnipe, on 10/10/2007, -2/+1I'd imagine this would be a fine use for AJAX and shouldn't be terribly difficult.
- Foxsnipe, on 10/10/2007, -3/+1Well, it isn't. But if you want to prevent a page reload AJAX is about as good as you can get besides frames.
- iticu, on 10/10/2007, -2/+0And alot less keyloggers when someone links a dodgy link out of the blue on an Internet forum.
- dustinpoplin, on 10/10/2007, -4/+2Uh, it would actually be worth a crap if it worked with firefox... pretty much useless...
- SweetMercury, on 10/10/2007, -3/+1REALLY nice design!
One thing I would have done, if it's possible from the designer's perspective, is to have the arrows go invisible again after a few seconds of non-motion from the mouse, even if the mouse was sitting over the hotspot. -
Show 51 - 56 of 56 discussions



What is Digg?
The Digg Toolbar for Firefox lets you Digg, submit content, and keep track of Digg even when you're not on the Digg site. Download the official