473,322 Members | 1,911 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,322 software developers and data experts.

Display image with hover

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

Dec 4 '07 #1
8 6534
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>.
Dec 4 '07 #2
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
Dec 4 '07 #3
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

Dec 5 '07 #4
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
Dec 5 '07 #5
"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

Dec 5 '07 #6
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

Dec 5 '07 #7
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
Dec 5 '07 #8
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

Dec 6 '07 #9

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

8
by: JLahm | last post by:
I have defined a class for my images called .image that specifies the default border color, width and style. I'd like to be able to have the pseudo elements link, visited and active have one color...
4
by: Don | last post by:
I have a client page that employs hover buttons. They work just fine in IE. But, when using Netscape, they intermittently won't display. When they don't display, all that shows is a gray box the...
3
by: Jannette | last post by:
I've got this to finally work in IE (its only taken me 2 days solid), but now mozilla isn't displaying the text on the same line as the image. I'm a newby at CSS, and I've think I've worked on trying...
18
by: fishwick | last post by:
I haven't really done any css in quite a while, and am banging my head against the wall trying get the rudimentary layout together of a church website home page to display correctly - I don't want...
7
by: fredo | last post by:
I've studied Eric Meyer's pure css popups, version two: http://meyerweb.com/eric/css/edge/popups/demo2.html which pops up an image when I roll over a text link. Now I want to pop up a large...
7
by: Cate Archer | last post by:
I want to have a border around an image that changes color when the mouse hovers over it. The following code works perfectly in FireFox but not in Internet Exploiter. The text link changes color...
17
by: seajay | last post by:
Hello, I noticed something strange when I was composing a XHTML document with CSS The following DOCTYPE causes the page to display differently on Fireflox 1.0.6 and Internet Explorer 6...
2
by: wreed06 | last post by:
Hello, I have 2 problems. In my webpage, I have a dropdown list with a button that takes the user to a popup window specific to the option. I am using Firefox 2.0.0.13. I have successfully...
10
by: dandyliondancer | last post by:
hola i figured out how to make an image appear next to a link when hovering by displaying it as a block and then using background:url div.menu a{ display:block; } div.menu a:hover{
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.