[WSG] Popup 'box' on hover
Hi, A client would like functionality similar to that used on istockphoto.com - i.e. that a 'popup' window is displayed with a larger image and some text when the user hovers over a thumbnail image. e.g. Can I do this with CSS in a standards-compliant and works cross-browser way? Any pointers or references to example code gratefully received. Thanks, Nick -- Nick Roper partner logical elements *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Popup 'box' on hover
http://www.cssplay.co.uk/menu/gallery_click Can you use this? On 8/23/07, Nick Roper [EMAIL PROTECTED] wrote: Hi, A client would like functionality similar to that used on istockphoto.com - i.e. that a 'popup' window is displayed with a larger image and some text when the user hovers over a thumbnail image. e.g. Can I do this with CSS in a standards-compliant and works cross-browser way? Any pointers or references to example code gratefully received. Thanks, Nick -- Nick Roper partner logical elements *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Popup 'box' on hover
Or even this: http://www.cssplay.co.uk/menu/lightbox Regards, Jason www.flexewebs.com On 8/23/07, Spirit Q.9 Gaming [EMAIL PROTECTED] wrote: http://www.cssplay.co.uk/menu/gallery_click Can you use this? On 8/23/07, Nick Roper [EMAIL PROTECTED] wrote: Hi, A client would like functionality similar to that used on istockphoto.com - i.e. that a 'popup' window is displayed with a larger image and some text when the user hovers over a thumbnail image. e.g. Can I do this with CSS in a standards-compliant and works cross-browser way? Any pointers or references to example code gratefully received. Thanks, Nick -- Nick Roper partner logical elements *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Popup 'box' on hover
That's cool, but I wanted to try and avoid having to use 'real-estate' on the page. A popup allows the larger image to display without having to allocate permanent space for it in the layout. Thanks for the link, as I'm sure that will come in handy anyway. Spirit Q.9 Gaming wrote: http://www.cssplay.co.uk/menu/gallery_click Can you use this? On 8/23/07, *Nick Roper* [EMAIL PROTECTED] mailto:[EMAIL PROTECTED] wrote: Hi, A client would like functionality similar to that used on istockphoto.com http://istockphoto.com - i.e. that a 'popup' window is displayed with a larger image and some text when the user hovers over a thumbnail image. e.g. Can I do this with CSS in a standards-compliant and works cross-browser way? Any pointers or references to example code gratefully received. Thanks, Nick -- Nick Roper partner logical elements *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] mailto:[EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** -- Nick Roper partner logical elements innovative web and internet solutions zend/php mysql approved partner email: [EMAIL PROTECTED] phone: +44 1749 676798 www: www.logical.co.uk skype: nick.roper / +44 20 7870 9587 logical elements, 34 Chamberlain Street, Wells, Somerset, BA5 2PJ --- *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Popup 'box' on hover
Spirit Q.9 Gaming wrote: http://www.cssplay.co.uk/menu/gallery_click Can you use this? Stu Nicholls has done a few :hover lightboxes: http://www.cssplay.co.uk/menu/lightbox.html If you want to be really flash (without flash, naturally)... http://www.cssplay.co.uk/menu/image_magnifier2.html Regards, Barney *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Popup 'box' on hover
That lightbox and the image will disappear when we move out the mouse though clicked, should use combo? On 8/23/07, Barney Carroll [EMAIL PROTECTED] wrote: Spirit Q.9 Gaming wrote: http://www.cssplay.co.uk/menu/gallery_click Can you use this? Stu Nicholls has done a few :hover lightboxes: http://www.cssplay.co.uk/menu/lightbox.html If you want to be really flash (without flash, naturally)... http://www.cssplay.co.uk/menu/image_magnifier2.html Regards, Barney *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Popup 'box' on hover
Spirit Q.9 Gaming wrote: That lightbox and the image will disappear when we move out the mouse though clicked, should use combo? What iStockPhoto does is a no-click interface where you just hover over things to expand them and off to make them disappear. iStock's thing uses javascript to keep the box positioned relative to the cursor, but that's just extra unnecessary hassle (Stu's methods can be used with JS turned off – hence a lot more accessible), and besides I think it's actually very irritating to have the text and image you're focussing on move about. Regards, Barney *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Popup 'box' on hover
i just mean it closes whole the gallery ... instead just close the pop up image. On 8/23/07, Barney Carroll [EMAIL PROTECTED] wrote: Spirit Q.9 Gaming wrote: That lightbox and the image will disappear when we move out the mouse though clicked, should use combo? What iStockPhoto does is a no-click interface where you just hover over things to expand them and off to make them disappear. iStock's thing uses javascript to keep the box positioned relative to the cursor, but that's just extra unnecessary hassle (Stu's methods can be used with JS turned off – hence a lot more accessible), and besides I think it's actually very irritating to have the text and image you're focussing on move about. Regards, Barney *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** -- http://spirit.q9-gaming.com/en/ Spirit's Inside: Blog Design *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Popup 'box' on hover
How about this: http://mikecherim.com/experiments/css_map_pop.php? This could be adapted easily I think. Cheers. Mike Cherim - Original Message - From: Nick Roper [EMAIL PROTECTED] To: wsg@webstandardsgroup.org Sent: Thursday, August 23, 2007 10:23 AM Subject: [WSG] Popup 'box' on hover Hi, A client would like functionality similar to that used on istockphoto.com - i.e. that a 'popup' window is displayed with a larger image and some text when the user hovers over a thumbnail image. e.g. Can I do this with CSS in a standards-compliant and works cross-browser way? Any pointers or references to example code gratefully received. Thanks, Nick -- Nick Roper partner logical elements *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Popup 'box' on hover
Thanks guys - excellent stuff. Nick Barney Carroll wrote: Spirit Q.9 Gaming wrote: http://www.cssplay.co.uk/menu/gallery_click Can you use this? Stu Nicholls has done a few :hover lightboxes: http://www.cssplay.co.uk/menu/lightbox.html If you want to be really flash (without flash, naturally)... http://www.cssplay.co.uk/menu/image_magnifier2.html Regards, Barney *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** -- Nick Roper partner logical elements *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
RE: [WSG] Popup 'box' on hover
I think it was Jeremy Keith that railed against having CSS do what JavaScript should do and vice versa. This is going beyond what CSS is good for. You'll have inconsistent behaviors, require the user to download invisible images, and more. I'd suggest looking at the container library with the YUI. You'll get great control of the hover activity and the positioning of the popup/div. You can also use AJAX to grab the image dynamically or use the YUI lazy loader to save the initial download expense of the invisible image. http://developer.yahoo.com/yui/container/ Ted -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Nick Roper Sent: Thursday, August 23, 2007 9:01 AM To: wsg@webstandardsgroup.org Subject: Re: [WSG] Popup 'box' on hover Thanks guys - excellent stuff. Nick *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Popup 'box' on hover
Just a question, does it have to be enlarged on hover?? That can be pretty messy and ugly if you mouse over it by accident. I would think onclick would be a better option with arrows to go to the next image etc like lightbox. [EMAIL PROTECTED] 23/08/2007 10:23:53 pm Hi, A client would like functionality similar to that used on istockphoto.com - i.e. that a 'popup' window is displayed with a larger image and some text when the user hovers over a thumbnail image. e.g. Can I do this with CSS in a standards-compliant and works cross-browser way? Any pointers or references to example code gratefully received. Thanks, Nick -- Nick Roper partner logical elements *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** ** The above message has been scanned and meets the Insurance Commission of Western Australia's Email security requirements for inbound transmission. ** The above message has been scanned and meets the Insurance Commission of Western Australia's Email security policy requirements for outbound transmission. This email (facsimile) and any attachments may be confidential and privileged. If you are not the intended recipient, you are hereby notified that any use, dissemination, distribution or copying of this email (facsimile) is strictly prohibited. If you have received this email (facsimile) in error please contact the Insurance Commission. Web: www.icwa.wa.gov.au Phone: +61 08 9264 * *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Popup 'box' on hover
I would create a css solution, with some unobtrusive javascript to enhance the functionality (such as to make it follow the mouse, animate in/out, etc.) Even then if the user has IE5 with JS turned off clicking the image could always take them to an enlarged view. I would make a link positioned relative and then place a span or something in the link that will have position absolute and display none, then on a:hover it could have display block. So you would have a basic enlargement, from there you could use js to replace your basic css driven enlargement with something a little more fancy. Nick Roper wrote: Hi, A client would like functionality similar to that used on istockphoto.com - i.e. that a 'popup' window is displayed with a larger image and some text when the user hovers over a thumbnail image. e.g. Can I do this with CSS in a standards-compliant and works cross-browser way? Any pointers or references to example code gratefully received. Thanks, Nick *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
