background-image flicker

The first method I ever used for multiple state buttons was to create a
graphic for each button for each state: AboutUs_on, AbooutUs_over,
AboutUs_out, etc. That works great when there are just a few buttons.
I'm creating interfaces now with many more buttons than "just a few".

I solved the maintenance problem by having generic button images, one
for each state, and having them be background images for text
containers, DIVs in this case, defined in external stylesheets. On
mouseover, mouseout, etc, I swap the classnames.

This does a couple of things for me. One, it decreases maintenance
because there are fewer images to create and only text to maintain.
Two, I can change the look and feel of a set of buttons by changing
what stylesheeet is referenced.

The problem is that when the classes swap, the transition is not
seamless. There is a flicker as the images swap out.

I've tried using javascript to preload the images hoping the browser
would cache them, but it doesn't affect background images, and there is
still a flicker.

I've tried making the background-image include both "on" and "off"
images, using classes to change the position of the background so that
only the "on" portion or "off" portion shows, and there is still a
flicker.

I've tried clipping, which didn't flicker. However, it didn't change
the image either.

Opera and Firefox appear to handle the transition the best, but because
this is a retail app it has to work in all browsers. Has anyone else
encountered this problem and solved it, and if so, how?

You can see what I'm trying to do at
http://new.seritas.com/buttons.asp. Any help would be appreciated.

- Bill in Kansas City, MO

did you try stacking them with zorder and swapping the visibility on
mouseover? since theyre both "there" to begin with, there really is no
swapping that has to take place, just make one visible, and the other not
visible.



<seamlyne (AT) hotmail (DOT) com> wrote

The first method I ever used for multiple state buttons was to create a
graphic for each button for each state: AboutUs_on, AbooutUs_over,
AboutUs_out, etc. That works great when there are just a few buttons.
I'm creating interfaces now with many more buttons than "just a few".

I solved the maintenance problem by having generic button images, one
for each state, and having them be background images for text
containers, DIVs in this case, defined in external stylesheets. On
mouseover, mouseout, etc, I swap the classnames.

This does a couple of things for me. One, it decreases maintenance
because there are fewer images to create and only text to maintain.
Two, I can change the look and feel of a set of buttons by changing
what stylesheeet is referenced.

The problem is that when the classes swap, the transition is not
seamless. There is a flicker as the images swap out.

I've tried using javascript to preload the images hoping the browser
would cache them, but it doesn't affect background images, and there is
still a flicker.

I've tried making the background-image include both "on" and "off"
images, using classes to change the position of the background so that
only the "on" portion or "off" portion shows, and there is still a
flicker.

I've tried clipping, which didn't flicker. However, it didn't change
the image either.

Opera and Firefox appear to handle the transition the best, but because
this is a retail app it has to work in all browsers. Has anyone else
encountered this problem and solved it, and if so, how?

You can see what I'm trying to do at
http://new.seritas.com/buttons.asp. Any help would be appreciated.

- Bill in Kansas City, MO

Thanks, but z-order doesn't work on background images. Image swapping
is easy, but it's what I'm trying to avoid for ease of maintenance.

The goal is to have one ON image and one OFF image shared by twenty
buttons with text caption overlayed. Possibly relative positioning,
but that's been problematic because there's no positioning used
anywhere else in the page.

Santos L Halper wrote:

did you try stacking them with zorder and swapping the visibility on
mouseover? since theyre both "there" to begin with, there really is no
swapping that has to take place, just make one visible, and the other not
visible.



seamlyne (AT) hotmail (DOT) com> wrote in message
news:1159908556.072882.197390 (AT) m7g2000cwm (DOT) googlegroups.com...
The first method I ever used for multiple state buttons was to create a
graphic for each button for each state: AboutUs_on, AbooutUs_over,
AboutUs_out, etc. That works great when there are just a few buttons.
I'm creating interfaces now with many more buttons than "just a few".

I solved the maintenance problem by having generic button images, one
for each state, and having them be background images for text
containers, DIVs in this case, defined in external stylesheets. On
mouseover, mouseout, etc, I swap the classnames.

This does a couple of things for me. One, it decreases maintenance
because there are fewer images to create and only text to maintain.
Two, I can change the look and feel of a set of buttons by changing
what stylesheeet is referenced.

The problem is that when the classes swap, the transition is not
seamless. There is a flicker as the images swap out.

I've tried using javascript to preload the images hoping the browser
would cache them, but it doesn't affect background images, and there is
still a flicker.

I've tried making the background-image include both "on" and "off"
images, using classes to change the position of the background so that
only the "on" portion or "off" portion shows, and there is still a
flicker.

I've tried clipping, which didn't flicker. However, it didn't change
the image either.

Opera and Firefox appear to handle the transition the best, but because
this is a retail app it has to work in all browsers. Has anyone else
encountered this problem and solved it, and if so, how?

You can see what I'm trying to do at
http://new.seritas.com/buttons.asp. Any help would be appreciated.

- Bill in Kansas City, MO

seamlyne (AT) hotmail (DOT) com wrote:

The goal is to have one ON image and one OFF image shared by twenty
buttons with text caption overlayed.

That javascript method is no way to go about it.

Suppose there is one image used for inactive and one for hover; try
something like this
a {
background: transparent url(off.gif) no-repeat 0% 0%;
color: #ffffff;
display: block;
height: 28px;
width: 300px;
}
a:hover {
background-image: url(on.gif);
}

Alternately use one image with a different "section" for each of the
pseudo selectors and set different values for the background-position
property rule for each pseudo state.

Search for css rollovers.

Also maybe reconsider the use of html table and div elements. Try
something like this

ul {
list-style-type: none;
}

li { margin: 0.1em 0; }

____markup____

<ul>
<li><a href="#">First Link</a></li>
<li><a href="#">Second Link</a</li>
</ul>

Louise