Re: how to make image on link ?

On 2009-02-21, dorayme <doraymeRidThis@xxxxxxxxxxxxxxx> wrote:
In article <slrngq08gl.3hb.spamspam@xxxxxxxxxxxxxxxxx>,
Ben C <spamspam@xxxxxxxxx> wrote:

On 2009-02-21, Jukka K. Korpela <jkorpela@xxxxxxxxx> wrote:
[...]
Here's what I'd suggest:

Markup:
This is a <a href="..." class="imgtipped">demo link<span
class="imgtip"></span></a> with an image tooltip, so to say.

CSS:

.imgtipped:hover { position: relative; }
.imgtipped:hover .imgtip {
position: absolute;
left: 0;
top: 1.3em;
z-index: 500;
width: 200px;
height: 200px;
background: url(test.png); }
...

Although fairly harmless there's no real need to set z-index there. The
link must be visible (i.e. not have things on top of it), or they
wouldn't be able to hover on it, and the image will always appear higher
than the link.

At least on my Mac browsers, including MacIE5, this is right. Perhaps JK
is thinking probs with other browsers? Good point of his to make it a bg
image to get over the prob of if css is off eh?

Yes, although speaking of probs with other browsers I'm wary of using
inline boxes to make containing blocks.

I didn't think it worked in Konqueror but it seems to now so perhaps
that was an older version.

I also don't like the way the spec implies that such containing blocks
can have negative widths (if the inline box wraps and ends up ending
left of where it started) but doesn't say what browsers should do with
that.

[...]
Now to a semi-comical effect to JK's excellent solution arising from the
issue of the link being at the bottom. In his solution, there is no prob
at top because he bottom images. And at bottom of page, there is no
*big* trouble either because scrollbars appear to alert user. Perhaps
authors would make simple provisions to avoid this slight effect but at
least it is a slightly challenging one:

Go to:

<http://dorayme.netweaver.com.au/img_popUps_on_links_jk.html>

and hover over the link at the bottom. Now try to get to the scrollbar
to scroll down so you will have room for the image when you go back to
the link to hover. I bet anyone $5 they can't. <g>

I did manage it by using the scroll wheel on the mouse. Hover on the
link and scroll down with the wheel so the mouse pointer stays on top of
the image. That keeps the link hovered (hover on an element and you
hover on all of its ancestors), so you can hold the image there while
you scroll down.

But yes, no chance of making it to the scrollbar and back in time.
.

Relevant Pages

  • Tip for newbies
    ... Don't install this game and expect to be able to create a character unless ... You have to scroll to the bottom of the License agreement and ...
    (alt.games.warcraft)
  • Re: Tip for newbies
    ... Don't install this game and expect to be able to create a character unless ... You have to scroll to the bottom of the License agreement and ... Then you have to restart the game again. ...
    (alt.games.warcraft)
  • Re: Linux Mint
    ... The RHS is where scrollbars are found. ... I have the Dock at the bottom since that means more room for icons. ... is that there's no way to select applications from hierarchical menus. ... Having to spot the colored vertical line and then mouse over to it to scroll is not a good way to operate in my opinion. ...
    (Ubuntu)
  • Re: OT Top Posting is Morally Wrong
    ... scroll down on every single post. ... top-posting, it is more disorienting. ... comment on something that starts at the bottom of the page. ... I don't read every single post, sometimes only when I see that it seems ...
    (alt.autos.toyota)
  • Re: OT Top Posting is Morally Wrong
    ... scroll down on every single post. ... top-posting, it is more disorienting. ... comment on something that starts at the bottom of the page. ... I don't read every single post, sometimes only when I see that it seems to ...
    (alt.autos.toyota)