TriplexTrio said:
What? Consider learning how to post on Usenet, including quotation style,
http://www.netmeister.org/news/learn2quote.html
and next time don't forget to post a URL.
That's link on image, and i want image on link, so
that when puting a mouse pointer on a link so that an image "pop-up" ?
So why didn't you describe what you meant, in simple descriptive terms (this
new attempt is much better than the original), instead of ultracompact
broken English that forces readers to guess what you might mean?
It now seems 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 odd situation, it would.
There's no way to do such things in HTML. You would need CSS, JavaScript,
Flash, or something else.
Jonathan's reply contains one CSS approach, but I don't think it's a
particularly good one. To begin with, the effect looks odd when CSS is "off"
(see
http://www.cs.tut.fi/~jkorpela/css-caveats.html if you don't realize
why this matters), since the image element or its alt text would appear as
part of the content statically.
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); }
Here test.png is a 200 by 200 image. On link mouseover, the empty <span>
element inside the <a> element turns into 200 by 200 box 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 value of 1.3em is assumed to
roughly correspond to the total heigh of a line, including linespacing
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.