"Jonathan N. Little" <lw*****@centralva.netwrites:
Change
img#photo:hover { display: inline; width: 100px; height: 100px; }
to
a:hover img#photo { display: inline; width: 100px; height: 100px; }
Of course if your swap between a element being displayed and then not,
then the page's layout needs to be reflowed. If your just toggle the
element's visibility property then the page doesn't have to reflow...
a#link-a img { visibility: hidden; }
a#link-a:hover img { visibility: visible; }
Jonathan,
Your suggestion much appreciated, but it seems the reflowing did not
so much result from my use of the display property, but from the size
of the image I was displaying by means of the hover: psudo
element. That is, if I redcuce the size of the image displayed by the
:hover pseudo element, both the display and the visibility properties
produce the desired effect. But if I increase the size of the image to
the point it touches a dimension of the container in which all this is
taking place (a fixed-width div centered in the viewport), then I have
the flickering reflow problem with either the display property or the
visibility property.
My usual approach is to use a thumnail or hot text to call a new page
that holds the desired image. The reason for my attempt to call just
the image itself is merely to simplify things, but apparently I made
them more complicated.
--
Haines Brown, KB1GRM