Re: [WSG] opacity as a hover for photo gallery thumbnails

[Philippe Wittenbergh]

On 3 Mar 2005, at 2:25 pm, Ben Curtis wrote:
Safari/Konquerer supports -khtml-opacity:#.#; in the same way.
Behold the march of progress!
It appears that Safari now supports the standard opacity:#.#; call, 
even though it is not listed here: 
http://developer.apple.com/internet/safari/safari_css.html
I think that is an old list.
Also Safari supports RGBA colors - testfile:


Philippe
---/---
Philippe Wittenbergh
now live : 
code | design | web projects : 
IE5 Mac bugs and oddities : 
**
The discussion list for  http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
**

Re: [WSG] opacity as a hover for photo gallery thumbnails

[Ben Curtis]

On Mar 2, 2005, at 11:05 AM, Ben Curtis wrote:
Safari/Konquerer supports -khtml-opacity:#.#; in the same way.
Behold the march of progress!
It appears that Safari now supports the standard opacity:#.#; call, 
even though it is not listed here: 
http://developer.apple.com/internet/safari/safari_css.html

Just ran a test and turned off the -khtml-opacity and the thing was 
still transparent. v1.2.4. Not sure when it got added.

--
   Ben Curtis : webwright
   bivia : a personal web studio
   http://www.bivia.com/
   v : 818 507 6613

**
The discussion list for  http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
**

Re: [WSG] opacity as a hover for photo gallery thumbnails

[Paul Novitski]

At 04:29 AM 3/2/2005, john wrote:
Still working on that photo gallery. :)  I found a site that helped me in 
creating a photo gallery I like, but I need to put a "hover" on the 
thumbnails so that the user knows where they are.  I'd like to have it 
change the opacity, but a) I'm not sure how accepted that is amongst the 
browsers and b) if it is, I'm sure how to do it, or where to place it in 
my CSS.

John,
I can think of two ways to create the effect you're looking for:
1) Overlay your thumbnail with a screen -- a checkerboard of opaque pixels 
on a transparent background.  (The effect varies dramatically with the 
pixel hue & shade.)  In order to get this to overlay the thumbnail you'd 
need an extra element in your markup (an extra anchor to accommodate IE 
which doesn't honor :hover on anything else) to lie on top of the 
image.  Here's my guess at the code:





div.thumbframe
{
position: relative; /* to contain the absolute child */
}
div.thumbframe img
{
width: 150px;
height: 100px;
}
div.thumbframe a.screen:hover
{
display: block;
position: absolute;
top: 0;
width: 150px;   /* same as thumbnail size */
height: 100px;  /* same as thumbnail size */
background-image: url("screen.jpg");
}
2) Swap the thumbnail with a modified version.  Duplicating the number of 
thumbnails can be an eye-roller -- for you it means managing twice as many 
images and for the user it means waiting for those additional 
downloads.  One way around this is to combine both the normal and 
hover-state thumbnail in the same image file, likely to be less than twice 
the size of a single thumb.  On hover, change the position of the photo 
within its frame so that the modified half comes into view.  Done with CSS, 
this means either making the thumbnail the background image of its frame 
and changing its background-position on hover, or placing a foreground 
image into a frame set to overflow: hidden and then changing the photo's 
margins to shift the normal thumb out and its Siamese twin into view.

Paul 

**
The discussion list for  http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
**

Re: [WSG] opacity as a hover for photo gallery thumbnails

[Ben Curtis]

I need to put a "hover" on the thumbnails so that the user knows where 
they are.  I'd like to have it change the opacity, but a) I'm not sure 
how accepted that is amongst the browsers
Modern Gecko supports the standard opacity:#.#; property.
Previous Gecko supports -moz-opacity:#.#; in the same way.
Safari/Konquerer supports -khtml-opacity:#.#; in the same way.
Win IE 5.0+ supports filter:alpha(opacity=##);
Win IE 5.5+ supports 
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=##);

"#.#" is a float between 0 (transparent) and 1 (opaque).
"##" is a float between 0 (transparent) and 100 (opaque). So for IE, 
multiply your opacity by 100.

Mac IE is out. I believe all Opera 7 is out.
This means 98% of the typical audience will support one form or another 
of CSS-based opacity settings, but only 3-5% will support the standard. 
But typically, specific audiences are atypical. Use your own stats.


and b) if it is, I'm sure how to do it, or where to place it in my CSS.
For your setup, I should think this would work:
#thumbs a {
filter:alpha(opacity=80);
-moz-opacity:0.8;
-khtml-opacity:0.8;
opacity:0.8;
}
#thumbs a:hover {
filter:alpha(opacity=100);
-moz-opacity:1;
-khtml-opacity:1;
opacity:1;
}
I've heard that some opacity engines switch off when the image is fully 
transparent or opaque, and sometimes there is a little flicker at that 
point. The workaround is to not set 0 or 1, but rather 0.0001 and 
0..

--
Ben Curtis : webwright
bivia : a personal web studio
http://www.bivia.com
v: (818) 507-6613

**
The discussion list for  http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
**

Re: [WSG] opacity as a hover for photo gallery thumbnails

[Francesca Murphy]

John,
I haven't looked at the site, but I've run into that "shift" problem.
The way I solved it was to assign the images (or links) a border that 
matched the background color, and then change the border color on 
hover. That way, there is no shifting.

f

...but it seems like if I increase the border on the thumbs (for the 
hover), they all shift their position.  Other things I've tried seems 
to affect the main photo itself.  I really could use some tips on this 
so I can finish it.

~john
_
Dr. Zeus Web Development
http://www.DrZeus.net
"content without clutter"
**
The discussion list for  http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
**

Re: [WSG] opacity as a hover for photo gallery thumbnails

[Gunlaug Sørtun]

john wrote:
I know it may be unnecessary, but I'd like to put a hover on them 
anyway.  Try as I might to understand the CSS better, it's still
unclear to me how to properly put a hover on the thumbnails.  I've
tried so many things that it's a jumble in my mind now...but it seems
like if I increase the border on the thumbs (for the hover), they all
shift their position.  Other things I've tried seems to affect the
main photo itself.  I really could use some tips on this so I can
finish it.
Didn't look too much into it, but a simple hover-effect can be created
by adjusting both margins and border on hover.
1: by making the basic 3px margin into this:
margin-width: 2px 4px 4px 2px; on hover, you'll get a noticeable shift
of that particular image 1px up and 1px left, that doesn't affect the
position of any other image.
2: changing the color and/or width of the border in a similar way, on
all four sides, may also give the "right" effect.
Just count the total width and height of each image, with border and
margin (83px by 58px), and play around within that exact space.
regards
Georg
--
http://www.gunlaug.no
**
The discussion list for  http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
**

Re: [WSG] opacity as a hover for photo gallery thumbnails

[john]

Thanks for pointing out the obvious to me (seriously) regarding looking 
on his site. :)

I know it may be unnecessary, but I'd like to put a hover on them 
anyway.  Try as I might to understand the CSS better, it's still unclear 
to me how to properly put a hover on the thumbnails.  I've tried so many 
things that it's a jumble in my mind now...but it seems like if I 
increase the border on the thumbs (for the hover), they all shift their 
position.  Other things I've tried seems to affect the main photo 
itself.  I really could use some tips on this so I can finish it.

~john
_
Dr. Zeus Web Development
http://www.DrZeus.net
"content without clutter"

on 3/2/2005 4:01 PM David Laakso said the following:
On Wed, 02 Mar 2005 12:29:19 +, john <[EMAIL PROTECTED]> wrote:
Hello,
Still working on that photo gallery. :)  I found a site that helped me  
in creating a photo gallery I like, but I need to put a "hover" on the  
thumbnails so that the user knows where they are.  I'd like to have it  
change the opacity, but a) I'm not sure how accepted that is amongst the  
browsers and b) if it is, I'm sure how to do it, or where to place it in  
my CSS.

Can anybody please assist me?  The site is at  
http://www.drzeus.net/clients/stevierays/gallery.html
Looks good, from http://www.stunicholls.myby.co.uk/I assume? On that same  
site you may find what you need regarding opacity: however, I'm really not  
sure it is necessary-- you only have a few photos, and it's obvious what's  
where, and been seen.
Regards,
David
**
The discussion list for  http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
**

Re: [WSG] opacity as a hover for photo gallery thumbnails

[David Laakso]

On Wed, 02 Mar 2005 12:29:19 +, john <[EMAIL PROTECTED]> wrote:
Hello,
Still working on that photo gallery. :)  I found a site that helped me  
in creating a photo gallery I like, but I need to put a "hover" on the  
thumbnails so that the user knows where they are.  I'd like to have it  
change the opacity, but a) I'm not sure how accepted that is amongst the  
browsers and b) if it is, I'm sure how to do it, or where to place it in  
my CSS.

Can anybody please assist me?  The site is at  
http://www.drzeus.net/clients/stevierays/gallery.html
Looks good, from http://www.stunicholls.myby.co.uk/I assume? On that same  
site you may find what you need regarding opacity: however, I'm really not  
sure it is necessary-- you only have a few photos, and it's obvious what's  
where, and been seen.
Regards,
David
--
de gustibus non est disputandum
http://www.dlaakso.com/

**
The discussion list for  http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
**

Re: [WSG] opacity as a hover for photo gallery thumbnails

[Chris Kennon]

Hi
Sorry I'm unable to help with your question, but would you be so kind 
as to pass along the url for developing a photo gallery in its current 
incarnation.

C
On Wednesday, March 2, 2005, at 04:29  AM, john wrote:
Hello,
Still working on that photo gallery. :)  I found a site that helped me 
in creating a photo gallery I like, but I need to put a "hover" on the 
thumbnails so that the user knows where they are.  I'd like to have it 
change the opacity, but a) I'm not sure how accepted that is amongst 
the browsers and b) if it is, I'm sure how to do it, or where to place 
it in my CSS.

Can anybody please assist me?  The site is at 
http://www.drzeus.net/clients/stevierays/gallery.html

Thanks, good people!  BTW, in seeing the statistics of our 
subscribers, I was pleasantly surprised to see 6 of us in Portugal. :) 
 While I'm not Portuguese (I'm an American), it does my heart good to 
see people here interested in web standards.
--

~john
_
Dr. Zeus Web Development
http://www.DrZeus.net
"content without clutter"

**
The discussion list for  http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
**

"The true measure of ignorance
is thinking intelligence is the
solution to everything."
-ck

Chris Kennon
Principal
ckimedia (www.ckimedia.com)
e-mail: ([EMAIL PROTECTED])
blog: (http://thebardwire.blogspot.com/)
ph: (619)429-3258
fax: (619)429-3258
**
The discussion list for  http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
**

[WSG] opacity as a hover for photo gallery thumbnails

[john]

Hello,
Still working on that photo gallery. :)  I found a site that helped me 
in creating a photo gallery I like, but I need to put a "hover" on the 
thumbnails so that the user knows where they are.  I'd like to have it 
change the opacity, but a) I'm not sure how accepted that is amongst the 
browsers and b) if it is, I'm sure how to do it, or where to place it in 
my CSS.

Can anybody please assist me?  The site is at 
http://www.drzeus.net/clients/stevierays/gallery.html

Thanks, good people!  BTW, in seeing the statistics of our subscribers, 
I was pleasantly surprised to see 6 of us in Portugal. :)  While I'm not 
Portuguese (I'm an American), it does my heart good to see people here 
interested in web standards.
--

~john
_
Dr. Zeus Web Development
http://www.DrZeus.net
"content without clutter"

**
The discussion list for  http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
**