This is a demo link with an image tooltip, so to say: the summer-generation Map butterfly.
Let us suppose that you are looking for a way to do the following: when the
pointer is moved over a particular link, some image that you specify would
appear near the link, somewhat similar to how a
“tooltip” text appears (on
most browsers) when the pointer is moved over a link that has a
title="..."
attribute. And presumably the image should disappear when the pointer is
moved away.
I’m not sure whether such behavior would make sense. But let’s assume that in some situation, it would.
There’s no way to do such things in HTML. You would need CSS, JavaScript,
Flash, or something else. There are several
possible approaches, but many CSS methods would fail to make due note of the
CSS Caveats,
i.e. would fail fail to work when CSS support is off.
In particular, if the image is included as document content,
via an img
element,
then the image or its alt
text would appear as
part of the content statically.
Here is my suggestion:
The basic idea is to add an empty span
element
inside the link element, so that you can make the image appear in it:
This is a <a href="..." class="imgtipped">link<span
class="imgtip"></span></a> with an image tooltip.
.imgtipped:hover { position: relative; }
.imgtipped:hover .imgtip {
position: absolute;
left: 0;
top: 1.2em;
width: 108px;
height: 126px;
background: url(test.jpg); }
* { line-height: 1.2; }
In the example,
test.jpg
is a 108 by 126 pixels image.
The bad news is that you need to hard-code the image dimensions
in HTML. (However, an exact match is not needed: if the image
is larger than the dimensions you specify in CSS, the rest
is just cut off. You can also use more refined background settings in CSS
to affect this.)
On link mouseover, the empty span
element inside the <a>
element turns into
a box of the same size as the image, with that image as
background, positioned relatively to the <a>
element content so that it
appears below it, left-aligned with it, and with a large
z-index
value so
that it appears on top of other content.
The top
property value
1.2em
has been chosen to match the
the total height of a line, including linespacing,
as set using the line-height
property.
This way, the user can click on the image as well in order
to follow the link. In the first version of this document,
the top
value was larger, creating a small gap between
the link text and the image. This often prevents the effect of clicking
on the image, since the link loses the over status, causing the image
to appear and the span
element shrink away—except
perhaps if you are fast enough. Try this:
nasty link?
If desired, you could set a border for the box in CSS. However, then an empty transparent rectangle with a border would appear on mouseover, if image loading is disabled in the browser or the browser just doesn't get the image for some reason. Thus, it is more robust to make any desired border a part of the image, using your favorite image processing program.
On the Opera browser, this technique often fails to work. The image might not appear or it might appear rather far from the link.
On different browsers, there is a potential problem if you position the tooltip image box as suggested here, i.e. below the link. If the link is near the bottom of a page, the image might not be visible as a whole. It would also be difficult to the user to scroll down to see the entire image, since if he uses the mouse—as most people would—the mouseout event would remove the image. The simple precaution is to add some content below the link.
Here is the demo link with an image tooltip again. It appears at the end of the page content proper, but followed by a footer. To reserve space for the image tooltip, I have set some extra spacing (margin) before the footer. The link: the summer-generation Map butterfly.