Re: how to make image on link ?
- From: "Jukka K. Korpela" <jkorpela@xxxxxxxxx>
- Date: Sat, 21 Feb 2009 12:42:19 +0200
TriplexTrio wrote:
No thats no it.
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.
--
Yucca, http://www.cs.tut.fi/~jkorpela/
.
- Follow-Ups:
- Re: how to make image on link ?
- From: Ben C
- Re: how to make image on link ?
- References:
- how to make image on link ?
- From: TriplexTrio
- Re: how to make image on link ?
- From: Sherm Pendley
- Re: how to make image on link ?
- From: TriplexTrio
- how to make image on link ?
- Prev by Date: Re: Looking for some best practice guidelines
- Next by Date: Re: The very, very strang thing (tables)
- Previous by thread: Re: how to make image on link ?
- Next by thread: Re: how to make image on link ?
- Index(es):
Relevant Pages
|
