[Javascript] Combining Behaviors/Effects

[Paul Novitski]

At 10/4/2011 02:45 PM, Tedd Sperling wrote:
> >> http://www.webbytedd.com/test/
> >>
> >> In short, I would like to create a single "fade-cycle image 
> replacement" technique. Both behaviors use the background image, 
> but I can't seem to master the problem just yet. My current code 
> and images are there for your review.

On Oct 4, 2011, at 5:15 PM, Paul Novitski wrote:
> > This shouldn't be difficult. The fade-cycle routine uses the 
> array gblImg() to point to the images it toggles between. I'd try 
> giving it two such arrays, e.g. gblImg_normal() and gblImg_hover(), 
> set gblImg equal to gblImg_normal, and on hover set gblImg equal to 
> gblImg_hover.

At 10/4/2011 02:45 PM, Tedd Sperling wrote:
>I had not thought of that. I was thinking that one image change was 
>caused by css pseudo-classes background position change and the 
>other by changing the background url (image) style via javascript. I 
>was trying to get both styling aspects together in one javascript 
>style change. I know, that makes about as much sense as my results 
>did, which didn't work.



Tedd, it sounds like your goal is even simpler than I'd suggested. 
Let CSS handle the background position shift as it does now but 
without specifying the background image url, and let JavaScript timer 
toggle the image src. Now, is Robert indeed not your mother's brother?

I like that solution because of the way it separates presentation 
(hover/background position) from behavior (timer/img src). That 
treats the image file names as content, not presentation. In most 
practical applications I imagine I'd want to specify the image file 
names in script or markup, rather than in a static external 
stylesheet, to make the images more variable and dynamic. For 
example, write the JavaScript to handle the slideshow and specify the 
image src names in the HTML, either in img markup or in JS variables 
injected into the document head in a script block.

Your stylesheet can similarly be slightly more versatile by shifting 
the background image position from "top" to "bottom" -- you don't 
really need to specify the image height in pixels / 2 if you've got 
only two images in the sprite. You still have to specify the height 
of the container that's got overflow: hidden so we see only one of 
the image halves, but using top & bottom lets you eliminate half that 
specificity. To complete the separation of static from dynamic 
values, the container height could be set by the generating 
server-side script in the HTML doc along with the image names.

I used to use sprites, combining multiple image views into the same 
image file, a lot more than I do today. Sprites are slightly more 
efficient in download speed than separate images, but they cost more 
in human time to create and modify. These days I'm more likely to use 
a "CSS preload" by specifying all the images in the markup but 
suppressing the visibility of hidden states with CSS. That way all 
the images download with the initial document rendering and are more 
likely to appear instantly by the time the user reaches them with the mouse.

Regards,

Paul
__________________________

Paul Novitski
Juniper Webcraft Ltd.
http://juniperwebcraft.com