Display image with hover

[Haines Brown]

I want a hot text string to display an image only when hovered.

In the body:

....
<a id="link-a" href="#nogo">
<img id="photo" src="..." />hot text
</a>
....

In the style:

img#photo { display: none; }
img#photo:hover { display: inline; width: 100px; height: 100px; }
--

Haines Brown, KB1GRM

[Ben C]

On 2007-12-04, Haines Brown <br****@teufel.hartford-hwp.comwrote:

I want a hot text string to display an image only when hovered.

In the body:

...
<a id="link-a" href="#nogo">
<img id="photo" src="..." />hot text
</a>
...

In the style:

img#photo { display: none; }

You can't hover on it if it's display: none-- because it isn't there.

Change

img#photo:hover { display: inline; width: 100px; height: 100px; }

to

a:hover img#photo { display: inline; width: 100px; height: 100px; }

i.e. display the photo if you hover on the <a>.

[Bergamot]

Haines Brown wrote:

I want a hot text string to display an image only when hovered.

<a id="link-a" href="#nogo">
<img id="photo" src="..." />hot text
</a>

Make it a background image instead of a foreground image. Position it
off screen initially, then reposition it on a:hover.

a {background: #fff url(img.png) -500px 50% no-repeat}
a:hover {background-position: 0 50%}

You probably want some left padding in there, too, unless it's OK for
the text to overlay the image.

--
Berg

[Haines Brown]

Ben C <sp******@spam.eggswrites:

On 2007-12-04, Haines Brown <br****@teufel.hartford-hwp.comwrote:

I want a hot text string to display an image only when hovered.

In the body:

...
<a id="link-a" href="#nogo">
<img id="photo" src="..." />hot text
</a>
...

In the style:

img#photo { display: none; }

You can't hover on it if it's display: none-- because it isn't there.

Change

img#photo:hover { display: inline; width: 100px; height: 100px; }

to

a:hover img#photo { display: inline; width: 100px; height: 100px; }

i.e. display the photo if you hover on the <a>.

This works except that the display is unstable. That is, on two
browsers, there is a flickering effect, as if the display were rapidly
jumping betwen the web page and the graphic displayed by hovering.

--

Haines Brown, KB1GRM

[Jonathan N. Little]

Haines Brown wrote:

Ben C <sp******@spam.eggswrites:

>On 2007-12-04, Haines Brown <br****@teufel.hartford-hwp.comwrote:

>>I want a hot text string to display an image only when hovered.

In the body:

...
<a id="link-a" href="#nogo">
<img id="photo" src="..." />hot text
</a>
...

In the style:

img#photo { display: none; }

You can't hover on it if it's display: none-- because it isn't there.

Change

>>img#photo:hover { display: inline; width: 100px; height: 100px; }

to

a:hover img#photo { display: inline; width: 100px; height: 100px; }

i.e. display the photo if you hover on the <a>.

This works except that the display is unstable. That is, on two
browsers, there is a flickering effect, as if the display were rapidly
jumping betwen the web page and the graphic displayed by hovering.

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; }

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

[Haines Brown]

"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

[Haines Brown]

Bergamot <be******@visi.comwrites:

Haines Brown wrote:

I want a hot text string to display an image only when hovered.

<a id="link-a" href="#nogo">
<img id="photo" src="..." />hot text
</a>

Make it a background image instead of a foreground image. Position
it off screen initially, then reposition it on a:hover.

a {background: #fff url(img.png) -500px 50% no-repeat}
a:hover {background-position: 0 50%}

You probably want some left padding in there, too, unless it's OK
for the text to overlay the image.

Very interesting! However, it did not quite have the desired
result. When when the image is brought into view by the :hover pseudo
element, the only portion of it that can be seen is that which happens
to falls within the hot text box. Here's my actual style definition:

a#link-left {
background-image: url(../bin/party_1948-b.jpg);
background-color: #fff;
background-position: -1500px 50%;
background-repeat: no-repeat;
}
a#link-left:hover {
background-position: 10px;
}

And in the body:

<a id="link-left" href="#nogo">test left</a>
--

Haines Brown, KB1GRM

[Bergamot]

Haines Brown wrote:

Bergamot <be******@visi.comwrites:

>Haines Brown wrote:

I want a hot text string to display an image only when hovered.

Make it a background image instead of a foreground image. Position
it off screen initially, then reposition it on a:hover.

when the image is brought into view by the :hover pseudo
element, the only portion of it that can be seen is that which happens
to falls within the hot text box.

You made no mention of how large your image is. Adjust the <apadding
(both horizontal and vertical) as needed to suit. If you have a very
short amount of text (1-2 words) then setting line-height to the image
height can work, too.
--
Berg

[Haines Brown]

Bergamot <be******@visi.comwrites:

Haines Brown wrote:

Bergamot <be******@visi.comwrites:

Haines Brown wrote:
I want a hot text string to display an image only when hovered.

Make it a background image instead of a foreground image. Position
it off screen initially, then reposition it on a:hover.

when the image is brought into view by the :hover pseudo
element, the only portion of it that can be seen is that which happens
to falls within the hot text box.

You made no mention of how large your image is. Adjust the <apadding
(both horizontal and vertical) as needed to suit. If you have a very
short amount of text (1-2 words) then setting line-height to the image
height can work, too.

Aha! The image is very wide, nearly the entire viewport, while the hot
link is only two short words. I gather your interesing method simply
would not apply here.

--

Haines Brown, KB1GRM