how to make image on link ?

T

TriplexTrio

Hi-Ho! I know making a title on link, but how to make an image on link ?

There are some javascripts, but they seem to complicated to adopt. Could you
Please suggest some simplified solutions ???

Thanks.
Triplex Trio
 
T

TriplexTrio

No thats no it. 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" ?

Thenks
 
J

Jonathan N. Little

TriplexTrio said:
No thats no it. 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" ?


a { position: relative; }
/* push popup image off screen */
a img{ position: absolute; left: -999em; bottom: 1em; }

/* IE requires that you do something to the link directly if you want
the hover to work on the decendant */
a:hover { color: blue; background-color: white; }

/* now set left on child put it into view */
a:hover img{ left: 3em; }

<p>
This is an example an <a href="http://www.example.com">image popup<img
src="balloon.jpg" width="89" height="50" alt="sample image balloon"></a>
on link hovers...
</p>
 
J

Jukka K. Korpela

TriplexTrio said:
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.
 
D

dorayme

Ben C said:
....

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?

With Jonathan's there would be other things to watch because the image
appears above the link and so authors would need to be careful not to
have this link at the top of the page where there is no room for the
image. One solution is to increase the relative distance so it simply
fails to appear at all on the top, better than frustrating slither of
appearance!

Interestingly, if Jonathan's were to go bottom-of-link-imaging, there
would not be so much trouble at the bottom because scrollbars would
appear to alert user and able to be actually activated. The positions at
top and bottom are assymmetrical in this respect.

Conclusion being that if author uses any one position for the image, it
should be at the bottom. But of course, it would not take a lot of wrk
to tailor two sets of such links depending on where they are likely to
occur on a page, one giving the rather more natural image over the link
and the other one just for the rare right at top link.

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>
 
A

Awful Dog Autry

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>

Hold the down-arrow key down while hovering.

(I'll leave a P.O. Box address later...)
 
D

dorayme

Awful Dog Autry said:
Hold the down-arrow key down while hovering.

(I'll leave a P.O. Box address later...)

You cheated! The terms of the bet are clearly stated:

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 might send you a buck though...
 
R

rf

dorayme said:
<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>

Roll your mouse wheel while hovering. Where is my $?


Note, your example is a bit flawed. I assume the popup image is supposed to
be part of the link, since it is actually part of the link. However it is
positioned outside the textual part of the link. There is a gap between the
text and the image. It is very difficult to move the mouse cursor from the
text to the image. It has to be done very quickly so there is no mouse move
event in the gap.

Changing top to 1.2em fixes this.
 
J

Jukka K. Korpela

dorayme said:
At least on my Mac browsers, including MacIE5, this is right. Perhaps
JK is thinking probs with other browsers?

No, the idea of setting z-index was just over-cautious.
Now to a semi-comical effect to JK's excellent solution arising from
the issue of the link being at the bottom.

A fair point, but when you know the risk exists, you can virtually always
avoid it by adding some real or semi-dummy content after the link.

Just in case you'd like to refer to something less transient than a Usenet
posting, I created a simple page that explains and demonstrates the
technique:
http://www.cs.tut.fi/~jkorpela/imgtip.html
 
D

dorayme

"rf said:
Roll your mouse wheel while hovering. Where is my $?
Sending Awful Dog Autry a buck was ex gratia, I reserve the right not to
make any more payments and certainly not as many or more payments than
would have occurred had someone won the bet fair and square.

Look, the whole terms and conditions of bets with me are written down
somewhere, my lawyer drafted it for me and online somewhere...
Note, your example is a bit flawed. I assume the popup image is supposed to
be part of the link, since it is actually part of the link. However it is
positioned outside the textual part of the link. There is a gap between the
text and the image. It is very difficult to move the mouse cursor from the
text to the image.

But why would one want to do that? There is no requirement to do so in
the bet?
 
R

rf

dorayme said:
But why would one want to do that? There is no requirement to do so in
the bet?

When I hovered over the link and use wheel to scroll the page down the
cursor ended up over the link and it was still a hand, indicating an active
link. My thought was then to move the cursor back up to the link (the "demo
link" part of it, that is). Alas when the cursor entered that little gap
between the image and the text bit the link was suddenly unhovered, the
image disappeared, the page scrolled down (so it's new bottom was at the
bottom of the canvas) and my cursor was left a couple of inches *above* the
link. Disconcerting.
 
R

rf

rf said:
When I hovered over the link and use wheel to scroll the page down the
cursor ended up over the link
image

and it was still a hand, indicating an
active link. My thought was then to move the cursor back up to the
link (the "demo link" part of it, that is). Alas when the cursor
entered that little gap between the image and the text bit the link
was suddenly unhovered, the image disappeared, the page scrolled down
(so it's new bottom was at the bottom of the canvas) and my cursor
was left a couple of inches *above* the link. Disconcerting.
 
R

rf

dorayme said:
There is a possible way that occurs to me that is barely arguably
within the terms of the bet and I mention only because it is so
unlikely to be offered. Using two mice, one might hover with one and
scroll the bars with the other. On my tests from years back using two
mice, what actually happened is that the cursor was a resultant from
resolving some sort of parallelogram of forces. I tried it with a
serial connected mouse on an old Mac which I had just put in a PCI
USB card into. I plugged a USB mouse in too and was amused for a
while by the contest. (perhaps PC owners can try it using USB and
that funny green connection for older PCs? Who knows, it might
produce two active cursors on Windows.

Nope. I use two "mice" all the time. Three sometimes. There is only one
cursor.
 
C

Chris F.A. Johnson

I am annoyed that MS is now co-opting the term "PC," even though the MAC
commercials started it.

The term has been precedes the Mac by years, at least since IBM
introduced their PC in 1981. The term personal computer (if no the
abbreviation) was used long before that.
 
D

dorayme

"Jukka K. Korpela said:
Just in case you'd like to refer to something less transient than a Usenet
posting, I created a simple page that explains and demonstrates the
technique:
http://www.cs.tut.fi/~jkorpela/imgtip.html

Yes, good. Just a couple of small points buried in following:

I have mentioned before that I find it more natural for pics that appear
to appear above the point of the cursor. Not sure idf this is an ET
thing or whether earthlings feel the same way.

But here is something a bit 'harder' and technical, being under the link
in my Safari and FF and having a title can cause the title to obscure
the image:

<http://dorayme.netweaver.com.au/justPics/hover.png>

Changing your

left: 0;
top: 1.2em;

to

right: 1em;
bottom: 1.2em;

fixes this possibility and at the same time helps to ensure that the
hovering pic does not tend to wander off browser to the right under some
browser conditions (not demonstrated with URL) on my tests.

Browsers tend to put titles under links. so maybe it is safer generally
to put hovering images over links?

With my above suggested CSS, there is then the 'link at top' problem
where there is no room. But this could be solved by similar to yours,
ensuring you have room at the top.

Doubtless I miss other possible caveats. I do notice that your butterfly
image does not show up on my Opera? Title is fine in Opera.

When I look a stuff like this, I always think, is it worth it.
 
T

TriplexTrio

Jukka K. Korpela said:
No, the idea of setting z-index was just over-cautious.


A fair point, but when you know the risk exists, you can virtually always
avoid it by adding some real or semi-dummy content after the link.

Just in case you'd like to refer to something less transient than a Usenet
posting, I created a simple page that explains and demonstrates the
technique:
http://www.cs.tut.fi/~jkorpela/imgtip.html

Nice way bro, this was enlighting to me. First i thought there is no
solution for that simple kind of tooltips, and this is the most simplest i
had saw. Nice work, it's based on logic so than it's workable. Nevermind
about purpose, there's always a good purpose :)
 
T

TriplexTrio

Chris F.A. Johnson said:
The term has been precedes the Mac by years, at least since IBM
introduced their PC in 1981. The term personal computer (if no the
abbreviation) was used long before that.

--
Chris F.A. Johnson, webmaster <http://Woodbine-Gerrard.com>
===================================================================
Author:
Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)


OK. What the heck IBM has to with the tooltips ?
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top