View Full Version : Pop-Up Link

08-07-2005, 08:36 AM
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.

08-07-2005, 08:41 AM
i looked at that image in Firefox, and it doesn't trigger any pop-up images....

08-07-2005, 08:58 AM
:confused: 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:

08-07-2005, 09:14 AM
loks like they did this:

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

<a href="image(?)"
><img height=? width=? src="/image(?)" border=0
onMouseOver="popup('images(?)')" onMouseOut="kill()"></a>

08-07-2005, 09:27 AM
<a href="#" class="popupimage">Hover over this link<img src="images/popup.gif" alt="" /></a>CSS:
a.popupimage {
position: relative;

a.popupimage img {
position: absolute;

a.popupimage:hover img {
display: block;
}No messy javascript.

08-07-2005, 12:53 PM
Yup looks the same thing as used here -


08-07-2005, 10:19 PM
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 (http://www.caedes.net/Zephir.cgi?lib=Caedes%3A%3ANewSearch&query=Germany), except for it's a text link instead of a picture.

Thanks for all the help so far. :thumbsup:

08-08-2005, 02:46 AM
Lucky, mrruben5's examlpe does do what you wanted it to do.

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

08-08-2005, 05:59 AM
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 (http://www.caedes.net/Zephir.cgi?lib=Caedes%3A%3ANewSearch&query=Germany). (Like when you move the cursor, the picture moves with it.)

08-08-2005, 06:15 AM
you must be ommiting something.

try this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

<title>title me :D</title>
<style type="text/css">
a.popupimage {
position: relative;

a.popupimage img {
position: relative;

a.popupimage:hover img {
display: block;
<a href="#" class="popupimage">mmm...<img src="popup.gif" alt="" /></a>

you have to play round with the positioniong of the image to make it fir in what your doing.

the image i used:

08-08-2005, 06:22 AM
Since the above only works in FF, maybe you'll find a use for this one (http://moneytreesystems.com/css/picpopup.html).

08-08-2005, 06:52 AM
Yeah. That works.

Thanks for all the help. :)

08-08-2005, 10:38 AM
I was already wondering why the thing didn't work. I used the suckerfish mehod because the image was nested.

08-08-2005, 07:30 PM
Yeah. That works.
I try this and work

thanks ..........

www.tugabit.com (http://www.tugabit.com)

08-09-2005, 03:44 AM
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 :thumbsup: