how to make image on link ?

Discussion in 'HTML' started by TriplexTrio, Feb 20, 2009.

  1. TriplexTrio

    TriplexTrio Guest

    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
    TriplexTrio, Feb 20, 2009
    #1
    1. Advertising

  2. TriplexTrio

    TriplexTrio Guest

    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
    TriplexTrio, Feb 20, 2009
    #2
    1. Advertising

  3. TriplexTrio wrote:
    > 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>


    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Feb 21, 2009
    #3
  4. 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/
    Jukka K. Korpela, Feb 21, 2009
    #4
  5. TriplexTrio

    dorayme Guest

    In article <>,
    Ben C <> wrote:

    > On 2009-02-21, Jukka K. Korpela <> 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?

    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>

    --
    dorayme
    dorayme, Feb 21, 2009
    #5
  6. On 21 Feb 2009, dorayme <> wrote:

    > 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...)

    --
    Awful Dog Autry
    Awful Dog Autry, Feb 22, 2009
    #6
  7. TriplexTrio

    dorayme Guest

    In article <>,
    Awful Dog Autry <> wrote:

    > On 21 Feb 2009, dorayme <> wrote:
    >
    > > 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...)


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

    --
    dorayme
    dorayme, Feb 22, 2009
    #7
  8. TriplexTrio

    rf Guest

    dorayme wrote:

    > <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.
    rf, Feb 22, 2009
    #8
  9. dorayme wrote:

    > 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

    --
    Yucca, http://www.cs.tut.fi/~jkorpela/
    Jukka K. Korpela, Feb 22, 2009
    #9
  10. TriplexTrio

    dorayme Guest

    In article <lL3ol.22660$>,
    "rf" <> wrote:

    > dorayme wrote:
    >
    > > <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 $?
    >

    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?

    > It has to be done very quickly so there is no mouse move
    > event in the gap.
    >
    > Changing top to 1.2em fixes this.


    --
    dorayme
    dorayme, Feb 23, 2009
    #10
  11. TriplexTrio

    rf Guest

    dorayme wrote:
    > In article <lL3ol.22660$>,
    > "rf" <> wrote:
    >
    >> dorayme wrote:
    >>
    >>> http://dorayme.netweaver.com.au/img_popUps_on_links_jk.html


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


    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.
    rf, Feb 23, 2009
    #11
  12. TriplexTrio

    rf Guest

    rf wrote:
    > dorayme wrote:
    >> In article <lL3ol.22660$>,
    >> "rf" <> wrote:
    >>
    >>> dorayme wrote:
    >>>
    >>>> http://dorayme.netweaver.com.au/img_popUps_on_links_jk.html

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

    >
    > 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.
    rf, Feb 23, 2009
    #12
  13. TriplexTrio

    rf Guest

    dorayme wrote:
    > In article <>,
    > Ben C <> wrote:
    >
    >> On 2009-02-21, dorayme <> wrote:

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

    >
    > 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.
    rf, Feb 23, 2009
    #13
  14. On 2009-02-23, wayne wrote:
    > dorayme wrote:
    >> In article <>,
    >>
    >> 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.
    >>

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

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

    dorayme Guest

    dorayme, Feb 23, 2009
    #15
  16. TriplexTrio

    dorayme Guest

    In article <gcjol.5468$>,
    "Jukka K. Korpela" <> wrote:

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

    --
    dorayme
    dorayme, Feb 23, 2009
    #16
  17. TriplexTrio

    TriplexTrio Guest

    "Jukka K. Korpela" <> wrote in message
    news:gcjol.5468$...
    > dorayme wrote:
    >
    >> 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
    >
    > --
    > Yucca, http://www.cs.tut.fi/~jkorpela/


    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 :)
    TriplexTrio, Feb 25, 2009
    #17
  18. TriplexTrio

    TriplexTrio Guest

    "Chris F.A. Johnson" <> wrote in message
    news:f3882$49a2de34$cef88ba3$...
    > On 2009-02-23, wayne wrote:
    >> dorayme wrote:
    >>> In article <>,
    >>>
    >>> 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.
    >>>

    >> 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.
    >
    > --
    > 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 ?
    TriplexTrio, Feb 25, 2009
    #18
  19. TriplexTrio

    TriplexTrio Guest

    Hey it works ! Somwhere in the world :)
    TriplexTrio, Feb 25, 2009
    #19
  20. On 2009-02-25, TriplexTrio wrote:
    >
    > "Chris F.A. Johnson" <> wrote in message
    > news:f3882$49a2de34$cef88ba3$...
    >> On 2009-02-23, wayne wrote:

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

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


    Nothing that I know of. Why do you ask?

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

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Kevin Spencer

    Re: Link Link Link DANGER WILL ROBINSON!!!

    Kevin Spencer, May 17, 2005, in forum: ASP .Net
    Replies:
    0
    Views:
    818
    Kevin Spencer
    May 17, 2005
  2. Joe
    Replies:
    0
    Views:
    667
  3. paul j
    Replies:
    10
    Views:
    858
    Starshine Moonbeam
    Dec 23, 2004
  4. Replies:
    23
    Views:
    962
    Neredbojias
    Mar 28, 2006
  5. Saravanankumar Saravanan

    How to make link using image with ajax

    Saravanankumar Saravanan, Mar 24, 2007, in forum: Ruby
    Replies:
    1
    Views:
    91
    Saravanankumar Saravanan
    Sep 27, 2007
Loading...

Share This Page