Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 15 of 15

Thread: Pop-Up Link

  1. #1
    New Coder
    Join Date
    May 2005
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Pop-Up Link

    I have seen a site that allows you to have a little image pop-up when you hover over a link. I was just wondering how you could do this, but with a text link.

    I attached an example of what I mean.
    Attached Thumbnails Attached Thumbnails Pop-Up Link-untitled.gif  
    Last edited by LuckyCharmz; 08-07-2005 at 07:43 AM.

  • #2
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,773
    Thanks
    19
    Thanked 155 Times in 146 Posts
    i looked at that image in Firefox, and it doesn't trigger any pop-up images....
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!

  • #3
    New Coder
    Join Date
    May 2005
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'm saying, look in the picture, it's a screenshot, so the mouse pointer is not there, but it shows that when you hover your cursor over the smaller picture, a bigger one will show up. I want to know how to do that with a text link, so that I can have a picture show up when you hover over the link.

    To see exactly what I mean, follow this link:
    http://www.caedes.net/Zephir.cgi?lib...&query=Germany

  • #4
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    loks like they did this:

    Code:
    <a href="/Zephir.cgi?lib=Caedes::Infopage&image=eurojer-1123130440.jpg"
    		><img height=62 width=82 src="/images/thumbs/eurojer-1123130440.jpg" border=0
    		onMouseOver="popup('eurojer-1123130440.jpg')" onMouseOut="kill()"></a>
    for you it would be:
    Code:
    <a href="image(?)"
    		><img height=? width=? src="/image(?)" border=0
    		onMouseOver="popup('images(?)')" onMouseOut="kill()"></a>

  • #5
    Regular Coder
    Join Date
    Nov 2004
    Location
    The Netherlands
    Posts
    551
    Thanks
    0
    Thanked 0 Times in 0 Posts
    HTML:
    Code:
    <a href="#" class="popupimage">Hover over this link<img src="images/popup.gif" alt="" /></a>
    CSS:
    Code:
    a.popupimage {
    position: relative;
    }
    
    a.popupimage img {
    display:none;
    position: absolute;
    top:-1em;
    right:-1em;
    }
    
    a.popupimage:hover img {
    display: block;
    }
    No messy javascript.
    CATdude about IE6: "All your box-model are belong to us"

  • #6
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yup looks the same thing as used here -

    http://www.stunicholls.myby.co.uk/menu/magnify.html

  • #7
    New Coder
    Join Date
    May 2005
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That's not exactly what I wanted. But thanks anyway.

    I don't think I'm being descriptive enough, and that's the problem.

    I want to have it so that there's a text link, that leads to a HTML page, not the picture itself. I want it so that when you hover over the link, it'll show the little box thing with a picture, but when you're not hovering over the link, it'll just be the regular text link.

    Exactly like the link I posted above, except for it's a text link instead of a picture.

    Thanks for all the help so far.

  • #8
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    Lucky, mrruben5's examlpe does do what you wanted it to do.

    mark, nice link. A lot of cool tid bits on there

  • #9
    New Coder
    Join Date
    May 2005
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    mrruben5's code didn't exactly work for me.

    This is what showed up on both Internet Explorer and Mozilla Firefox:



    As you can see, the picture and the link are together, I want the picture to pop up only when the cursor is hovering over the link. Exactly like the link I provided above. (Like when you move the cursor, the picture moves with it.)
    Last edited by LuckyCharmz; 08-08-2005 at 05:03 AM.

  • #10
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    you must be ommiting something.

    try this:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>title me :D</title>
    <style type="text/css">
    a.popupimage {
    position: relative;
    }
    
    a.popupimage img {
    display:none;
    position: relative;
    top:0em;
    left:120px;
    }
    
    a.popupimage:hover img {
    display: block;
    }
    </style>
    </head>
    <body>
    <a href="#" class="popupimage">mmm...<img src="popup.gif" alt="" /></a>
    </body>
    </html>
    you have to play round with the positioniong of the image to make it fir in what your doing.

    the image i used:
    Attached Thumbnails Attached Thumbnails Pop-Up Link-popup.gif  
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #11
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Since the above only works in FF, maybe you'll find a use for this one.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #12
    New Coder
    Join Date
    May 2005
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yeah. That works.

    Thanks for all the help.
    Last edited by LuckyCharmz; 08-08-2005 at 05:54 AM.

  • #13
    Regular Coder
    Join Date
    Nov 2004
    Location
    The Netherlands
    Posts
    551
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I was already wondering why the thing didn't work. I used the suckerfish mehod because the image was nested.
    CATdude about IE6: "All your box-model are belong to us"

  • #14
    New to the CF scene
    Join Date
    Aug 2005
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Yeah. That works.

    Yeah. That works.
    I try this and work

    thanks ..........


    www.tugabit.com

  • #15
    New Coder
    Join Date
    May 2005
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by mrruben5
    I was already wondering why the thing didn't work. I used the suckerfish mehod because the image was nested.
    Oh, it didn't work because somehow the CSS didn't get into it. I could have sworn I put it in but when I went back to edit the page, it wasn't there. After I put it in it worked fine. Thanks again


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •